@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -0,0 +1,291 @@
+import type { Browser } from 'detect-browser';
+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;
+    $browser: Browser | 'bot' | null | undefined;
+}>;
+export declare const StyledMotionComboBoxBody: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
+    slot?: string | undefined;
+    title?: string | 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;
+    onScroll?: import("react").UIEventHandler<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,198 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { ComboBoxDirection } from '../../types/comboBox';
+export const StyledComboBox = styled.div`
+    user-select: none;
+    width: fit-content;
+`;
+export const StyledComboBoxHeader = styled.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' : 'default';
+}};
+    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 === ComboBoxDirection.BOTTOM ? css`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : css`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return css`
+            border-radius: 3px;
+        `;
+}}
+
+    ${_ref7 => {
+  let {
+    $isMobile,
+    $isDisabled,
+    theme
+  } = _ref7;
+  return !$isMobile && !$isDisabled && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxPlaceholder = styled.div`
+    align-items: center;
+    color: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+`;
+export const StyledComboBoxPlaceholderImage = styled.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 && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+export const StyledComboBoxIconWrapper = styled.div`
+    margin-left: 5px;
+`;
+export const StyledMotionComboBoxBody = styled(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 === ComboBoxDirection.BOTTOM) {
+    return css`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+            `;
+  }
+  return css`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref17 => {
+  let {
+    $browser,
+    theme
+  } = _ref17;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","StyledComboBoxHeader","_ref","$isDisabled","_ref2","theme","_ref3","_ref4","$minWidth","_ref5","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref11","_ref12","_ref13","_ref14","$maxHeight","_ref15","$height","_ref16","_ref17","$browser"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { 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' : 'default')};\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    $browser: Browser | 'bot' | null | undefined;\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    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from 'react';
+import type { ComboBoxProps, IComboBoxItem } from '../ComboBox';
+export type ComboBoxItemProps = {
+    imageUrl: IComboBoxItem['imageUrl'];
+    isSelected: boolean;
+    onSelect: (itemToSelect: IComboBoxItem) => void;
+    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];
+    suffixElement?: ReactNode;
+    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,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = _ref => {
+  let {
+    imageUrl,
+    isSelected,
+    onSelect,
+    shouldShowRoundImage,
+    suffixElement,
+    text,
+    value
+  } = _ref;
+  const handleItemClick = useCallback(() => {
+    onSelect({
+      text,
+      value
+    });
+  }, [onSelect, text, value]);
+  const {
+    isMobile
+  } = chayns.env;
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
+    onClick: handleItemClick,
+    $isMobile: isMobile,
+    $isSelected: isSelected
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
+    src: imageUrl,
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), text, suffixElement), [handleItemClick, imageUrl, isMobile, isSelected, shouldShowRoundImage, suffixElement, text]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+export 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","useCallback","useMemo","StyledComboBoxItem","StyledComboBoxItemImage","ComboBoxItem","_ref","imageUrl","isSelected","onSelect","shouldShowRoundImage","suffixElement","text","value","handleItemClick","isMobile","chayns","env","createElement","onClick","$isMobile","$isSelected","src","$shouldShowRoundImage","displayName"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, 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    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    imageUrl,\n    isSelected,\n    onSelect,\n    shouldShowRoundImage,\n    suffixElement,\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                {suffixElement}\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            imageUrl,\n            isMobile,\n            isSelected,\n            shouldShowRoundImage,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAElE,SAASC,kBAAkB,EAAEC,uBAAuB,QAAQ,uBAAuB;AAYnF,MAAMC,YAAmC,GAAGC,IAAA,IAQtC;EAAA,IARuC;IACzCC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,oBAAoB;IACpBC,aAAa;IACbC,IAAI;IACJC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAMQ,eAAe,GAAGb,WAAW,CAAC,MAAM;IACtCQ,QAAQ,CAAC;MAAEG,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACJ,QAAQ,EAAEG,IAAI,EAAEC,KAAK,CAAC,CAAC;EAE3B,MAAM;IAAEE;EAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;EAE/B,OAAOf,OAAO,CACV,mBACIF,KAAA,CAAAkB,aAAA,CAACf,kBAAkB;IACfgB,OAAO,EAAEL,eAAgB;IACzBM,SAAS,EAAEL,QAAS;IACpBM,WAAW,EAAEb;EAAW,GAEvBD,QAAQ,iBACLP,KAAA,CAAAkB,aAAA,CAACd,uBAAuB;IACpBkB,GAAG,EAAEf,QAAS;IACdgB,qBAAqB,EAAEb;EAAqB,CAC/C,CACJ,EACAE,IAAI,EACJD,aACe,CACvB,EACD,CACIG,eAAe,EACfP,QAAQ,EACRQ,QAAQ,EACRP,UAAU,EACVE,oBAAoB,EACpBC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDP,YAAY,CAACmB,WAAW,GAAG,cAAc;AAEzC,eAAenB,YAAY"}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';
+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<{
+    $shouldShowRoundImage?: boolean;
+}>;
+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,54 @@
+import styled, { css } from 'styled-components';
+export const StyledComboBoxItem = styled.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 && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxItemImage = styled.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 && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isMobile","StyledComboBoxItemImage","img","_ref4","_ref5","$shouldShowRoundImage"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isMobile: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isMobile, theme }: StyledComboBoxItemProps) =>\n        !$isMobile &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => 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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AAC9C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC5C,CAACC,SAAS,IACVT,GAAI;AACZ;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAE;AAC3D;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAID,OAAO,MAAMM,uBAAuB,GAAGX,MAAM,CAACY,GAAkC;AAChF;AACA,eAAeC,KAAA;EAAA,IAAC;IAAER;EAAoC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBd,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}