@mantine/core 7.0.0-alpha.13 → 7.0.0-alpha.14

package/esm/index.css

@@ -40,6 +40,13 @@ body {
   -moz-osx-font-smoothing: var(--mantine-moz-font-smoothing);
 }
 
+@media screen and (max-device-width: 500px) {
+
+body {
+    -webkit-text-size-adjust: 100%
+}
+  }
+
 @media (prefers-reduced-motion: reduce) {
     [data-respect-reduced-motion] [data-reduce-motion] {
       transition: none;
@@ -2218,6 +2225,151 @@ body {
   border-radius: 10000rem;
 }
 
+.mantine--1TgA5h {
+  --combobox-chevron-size-xs: calc(0.875rem * var(--mantine-scale));
+  --combobox-chevron-size-sm: calc(1.125rem * var(--mantine-scale));
+  --combobox-chevron-size-md: calc(1.25rem * var(--mantine-scale));
+  --combobox-chevron-size-lg: calc(1.5rem * var(--mantine-scale));
+  --combobox-chevron-size-xl: calc(1.75rem * var(--mantine-scale));
+
+  width: var(--combobox-chevron-size);
+  height: var(--combobox-chevron-size);
+  color: var(--_color);
+}
+
+  [data-mantine-color-scheme='light'] .mantine--1TgA5h {
+    --_color: var(--mantine-color-gray-6);
+}
+
+  [data-mantine-color-scheme='dark'] .mantine--1TgA5h {
+    --_color: var(--mantine-color-dark-3);
+}
+
+  .mantine--1TgA5h[data-error] {
+    --_color: var(--mantine-color-error);
+  }
+
+.mantine-Hu7S-XH {
+  position: absolute;
+  background-color: var(--_popover-bg);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--_popover-bd);
+  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  box-shadow: var(--popover-shadow, none);
+  border-radius: var(--popover-radius);
+}
+
+  .mantine-Hu7S-XH:focus {
+    outline: none;
+  }
+
+  [data-mantine-color-scheme='light'] .mantine-Hu7S-XH {
+    --_popover-bg: var(--mantine-color-white);
+    --_popover-bd: var(--mantine-color-gray-2);
+}
+
+  [data-mantine-color-scheme='dark'] .mantine-Hu7S-XH {
+    --_popover-bg: var(--mantine-color-dark-6);
+    --_popover-bd: var(--mantine-color-dark-4);
+}
+
+.mantine-XLi9Yuw {
+  background-color: inherit;
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--_popover-bd);
+  z-index: 1;
+}
+
+.mantine-oGVJEaz {
+  --combobox-option-padding-xs: calc(0.25rem * var(--mantine-scale)) calc(0.5rem * var(--mantine-scale));
+  --combobox-option-padding-sm: calc(0.375rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
+  --combobox-option-padding-md: calc(0.5rem * var(--mantine-scale)) calc(0.75rem * var(--mantine-scale));
+  --combobox-option-padding-lg: calc(0.625rem * var(--mantine-scale)) calc(1rem * var(--mantine-scale));
+  --combobox-option-padding-xl: calc(0.875rem * var(--mantine-scale)) calc(1.25rem * var(--mantine-scale));
+
+  padding: var(--combobox-padding);
+}
+
+  .mantine-oGVJEaz[data-hidden] {
+    display: none;
+  }
+
+.mantine-Jvh599k {
+  padding: var(--combobox-option-padding);
+  font-size: var(--combobox-option-fz);
+  border-radius: var(--mantine-radius-default);
+  background-color: var(--_option-bg, transparent);
+  color: var(--_option-color, inherit);
+  opacity: var(--_option-opacity, 1);
+  cursor: var(--_option-cursor, pointer);
+}
+
+.mantine-Jvh599k[data-combobox-selected] {
+    --_option-bg: var(--mantine-color-primary);
+    --_option-color: var(--mantine-color-white);
+  }
+
+.mantine-Jvh599k[data-combobox-disabled] {
+    --_option-cursor: not-allowed;
+    --_option-opacity: 0.35;
+  }
+
+@media (hover: hover) {
+      [data-mantine-color-scheme='light'] .mantine-Jvh599k:hover:not([data-combobox-selected], [data-combobox-disabled]) {
+        --_option-bg: var(--mantine-color-gray-0);
+  }
+
+      [data-mantine-color-scheme='dark'] .mantine-Jvh599k:hover:not([data-combobox-selected], [data-combobox-disabled]) {
+        --_option-bg: var(--mantine-color-dark-7);
+  }
+}
+
+@media (hover: none) {
+      [data-mantine-color-scheme='light'] .mantine-Jvh599k:active:not([data-combobox-selected], [data-combobox-disabled]) {
+        --_option-bg: var(--mantine-color-gray-0);
+  }
+
+      [data-mantine-color-scheme='dark'] .mantine-Jvh599k:active:not([data-combobox-selected], [data-combobox-disabled]) {
+        --_option-bg: var(--mantine-color-dark-7);
+  }
+}
+
+.mantine-E0imXrV {
+  margin-left: calc(var(--combobox-padding) * -1);
+  margin-right: calc(var(--combobox-padding) * -1);
+  margin-top: calc(var(--combobox-padding) * -1);
+  width: calc(100% + var(--combobox-padding) * 2);
+  border-top-width: 0;
+  border-right-width: 0;
+  border-left-width: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: var(--combobox-padding);
+  background-color: var(--_search_background);
+  position: relative;
+  z-index: 1000;
+}
+
+.mantine-E0imXrV,
+  .mantine-E0imXrV:focus {
+    border-color: var(--_search-border-color);
+  }
+
+[data-mantine-color-scheme='light'] .mantine-E0imXrV {
+    --_search-border-color: var(--mantine-color-gray-2);
+    --_search_background: var(--mantine-color-white);
+}
+
+[data-mantine-color-scheme='dark'] .mantine-E0imXrV {
+    --_search-border-color: var(--mantine-color-dark-4);
+    --_search_background: var(--mantine-color-dark-7);
+}
+
+.mantine-AHC-x-C {
+  font-size: var(--combobox-option-fz);
+  text-align: center;
+  padding: var(--combobox-option-padding);
+  color: var(--mantine-color-dimmed);
+}
+
 .mantine-jQnfD5v {
   --container-size-xs: calc(33.75rem * var(--mantine-scale));
   --container-size-sm: calc(45rem * var(--mantine-scale));
@@ -2308,6 +2460,136 @@ body {
       margin-right: var(--mantine-spacing-xs);
 }
 
+.mantine-i2zl3YF {
+  line-height: 1;
+  padding: 0;
+  margin: 0;
+  font-weight: 400;
+  font-size: var(--mantine-font-size-md);
+}
+
+.mantine-zfPHD3v {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--mb-padding);
+  padding-right: var(--_pr, calc(var(--mb-padding) - calc(0.3125rem * var(--mantine-scale))));
+  padding-left: var(--_pl, var(--mb-padding));
+  position: sticky;
+  top: 0;
+  background-color: var(--mantine-color-body);
+  z-index: 1000;
+}
+
+[dir="rtl"] .mantine-zfPHD3v {
+    --_pr: var(--mb-padding);
+    --_pl: calc(var(--mb-padding) - calc(0.3125rem * var(--mantine-scale)));
+}
+
+.mantine-4xc51-t {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  z-index: calc(var(--mb-z-index) + 1);
+  pointer-events: none;
+}
+
+.mantine-z46xbr2 {
+  pointer-events: all;
+  box-shadow: var(--mb-shadow);
+}
+
+.mantine-HTNzGUo {
+  margin-left: var(--_close-ml, auto);
+  margin-right: var(--_close-mr, 0);
+}
+
+[dir="rtl"] .mantine-HTNzGUo {
+    --_close-ml: 0;
+    --_close-mr: auto;
+}
+
+.mantine-YGR5-68 {
+  padding: var(--mb-padding);
+  padding-top: var(--_pt, var(--mb-padding));
+}
+
+.mantine-YGR5-68:not(:only-child) {
+    --_pt: 0;
+  }
+
+.mantine-lqpFSmK {
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  touch-action: manipulation;
+  text-decoration: none;
+  border-radius: var(--paper-radius);
+  box-shadow: var(--paper-shadow);
+  background-color: var(--mantine-color-body);
+  border: var(--_paper-border-width, 0) solid var(--_paper-border-color, transparent);
+}
+
+  .mantine-lqpFSmK[data-with-border] {
+    --_paper-border-width: 1px;
+  }
+
+  [data-mantine-color-scheme='light'] .mantine-lqpFSmK[data-with-border] {
+      --_paper-border-color: var(--mantine-color-gray-3);
+}
+
+  [data-mantine-color-scheme='dark'] .mantine-lqpFSmK[data-with-border] {
+      --_paper-border-color: var(--mantine-color-dark-4);
+}
+
+.mantine-aUY-pnb {
+  inset: 0;
+  position: var(--_overlay-position, absolute);
+  background: var(--overlay-bg);
+  backdrop-filter: var(--overlay-filter);
+  border-radius: var(--overlay-radius);
+  z-index: var(--overlay-z-index);
+}
+
+  .mantine-aUY-pnb[data-fixed] {
+    --_overlay-position: fixed;
+  }
+
+  .mantine-aUY-pnb[data-center] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+.mantine-5KeVJJi {
+  --drawer-size-xs: calc(20rem * var(--mantine-scale));
+  --drawer-size-sm: calc(23.75rem * var(--mantine-scale));
+  --drawer-size-md: calc(27.5rem * var(--mantine-scale));
+  --drawer-size-lg: calc(38.75rem * var(--mantine-scale));
+  --drawer-size-xl: calc(48.75rem * var(--mantine-scale));
+}
+
+.mantine--zh-iwI {
+  z-index: 1000;
+}
+
+.mantine-LP0gMBl {
+  --paper-radius: 0 !important;
+  flex: var(--drawer-flex);
+  height: var(--drawer-height);
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 0;
+  overflow-y: auto;
+}
+
+.mantine-KKTsYnZ {
+  display: flex;
+  justify-content: var(--drawer-justify);
+  align-items: var(--drawer-align);
+}
+
 .mantine-aYUA2uh {
   padding: var(--mantine-spacing-lg);
   padding-top: var(--mantine-spacing-xs);
@@ -2375,17 +2657,15 @@ body {
 
 .mantine--7TY0Qe {
   background-color: var(--_mark-bg);
-  color: var(--_mark-color);
+  color: var(--mantine-color-black);
 }
 
   [data-mantine-color-scheme='light'] .mantine--7TY0Qe {
     --_mark-bg: var(--mark-bg-light);
-    --_mark-color: inherit;
 }
 
   [data-mantine-color-scheme='dark'] .mantine--7TY0Qe {
     --_mark-bg: var(--mark-bg-dark);
-    --_mark-color: var(--mantine-color-dark-9);
 }
 
 .mantine-w2QLGBV {
@@ -2425,108 +2705,6 @@ body {
     --_kbd-bg: var(--mantine-color-dark-5);
 }
 
-.mantine-i2zl3YF {
-  line-height: 1;
-  padding: 0;
-  margin: 0;
-  font-weight: 400;
-  font-size: var(--mantine-font-size-md);
-}
-
-.mantine-zfPHD3v {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--mb-padding);
-  padding-right: var(--_pr, calc(var(--mb-padding) - calc(0.3125rem * var(--mantine-scale))));
-  padding-left: var(--_pl, var(--mb-padding));
-  position: sticky;
-  top: 0;
-  background-color: var(--mantine-color-body);
-  z-index: 1000;
-}
-
-[dir="rtl"] .mantine-zfPHD3v {
-    --_pr: var(--mb-padding);
-    --_pl: calc(var(--mb-padding) - calc(0.3125rem * var(--mantine-scale)));
-}
-
-.mantine-4xc51-t {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  bottom: 0;
-  z-index: calc(var(--mb-z-index) + 1);
-  pointer-events: none;
-}
-
-.mantine-z46xbr2 {
-  pointer-events: all;
-  box-shadow: var(--mb-shadow);
-}
-
-.mantine-HTNzGUo {
-  margin-left: var(--_close-ml, auto);
-  margin-right: var(--_close-mr, 0);
-}
-
-[dir="rtl"] .mantine-HTNzGUo {
-    --_close-ml: 0;
-    --_close-mr: auto;
-}
-
-.mantine-YGR5-68 {
-  padding: var(--mb-padding);
-  padding-top: var(--_pt, var(--mb-padding));
-}
-
-.mantine-YGR5-68:not(:only-child) {
-    --_pt: 0;
-  }
-
-.mantine-lqpFSmK {
-  outline: 0;
-  -webkit-tap-highlight-color: transparent;
-  display: block;
-  touch-action: manipulation;
-  text-decoration: none;
-  border-radius: var(--paper-radius);
-  box-shadow: var(--paper-shadow);
-  background-color: var(--mantine-color-body);
-  border: var(--_paper-border-width, 0) solid var(--_paper-border-color, transparent);
-}
-
-  .mantine-lqpFSmK[data-with-border] {
-    --_paper-border-width: 1px;
-  }
-
-  [data-mantine-color-scheme='light'] .mantine-lqpFSmK[data-with-border] {
-      --_paper-border-color: var(--mantine-color-gray-3);
-}
-
-  [data-mantine-color-scheme='dark'] .mantine-lqpFSmK[data-with-border] {
-      --_paper-border-color: var(--mantine-color-dark-4);
-}
-
-.mantine-aUY-pnb {
-  inset: 0;
-  position: var(--_overlay-position, absolute);
-  background: var(--overlay-bg);
-  backdrop-filter: var(--overlay-filter);
-  border-radius: var(--overlay-radius);
-  z-index: var(--overlay-z-index);
-}
-
-  .mantine-aUY-pnb[data-fixed] {
-    --_overlay-position: fixed;
-  }
-
-  .mantine-aUY-pnb[data-center] {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
 .mantine-rDD4RW2 {
   --modal-size-xs: calc(20rem * var(--mantine-scale));
   --modal-size-sm: calc(23.75rem * var(--mantine-scale));
@@ -2577,30 +2755,6 @@ body {
   padding-right: var(--_inner-x-offset, var(--modal-x-offset));
 }
 
-.mantine--1TgA5h {
-  --combobox-chevron-size-xs: calc(0.875rem * var(--mantine-scale));
-  --combobox-chevron-size-sm: calc(1.125rem * var(--mantine-scale));
-  --combobox-chevron-size-md: calc(1.25rem * var(--mantine-scale));
-  --combobox-chevron-size-lg: calc(1.5rem * var(--mantine-scale));
-  --combobox-chevron-size-xl: calc(1.75rem * var(--mantine-scale));
-
-  width: var(--combobox-chevron-size);
-  height: var(--combobox-chevron-size);
-  color: var(--_color);
-}
-
-  [data-mantine-color-scheme='light'] .mantine--1TgA5h {
-    --_color: var(--mantine-color-gray-6);
-}
-
-  [data-mantine-color-scheme='dark'] .mantine--1TgA5h {
-    --_color: var(--mantine-color-dark-3);
-}
-
-  .mantine--1TgA5h[data-error] {
-    --_color: var(--mantine-color-error);
-  }
-
 .mantine-YiPmNPd {
   overflow: hidden;
   box-sizing: border-box;
@@ -2757,35 +2911,6 @@ body {
     --_close-button-hover-bg: var(--mantine-color-dark-8);
 }
 
-.mantine-Hu7S-XH {
-  position: absolute;
-  background-color: var(--_popover-bg);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--_popover-bd);
-  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-  box-shadow: var(--popover-shadow, none);
-  border-radius: var(--popover-radius);
-}
-
-  .mantine-Hu7S-XH:focus {
-    outline: none;
-  }
-
-  [data-mantine-color-scheme='light'] .mantine-Hu7S-XH {
-    --_popover-bg: var(--mantine-color-white);
-    --_popover-bd: var(--mantine-color-gray-2);
-}
-
-  [data-mantine-color-scheme='dark'] .mantine-Hu7S-XH {
-    --_popover-bg: var(--mantine-color-dark-6);
-    --_popover-bd: var(--mantine-color-dark-4);
-}
-
-.mantine-XLi9Yuw {
-  background-color: inherit;
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--_popover-bd);
-  z-index: 1;
-}
-
 .mantine--CW641A {
   position: relative;
   overflow: hidden;

package/esm/index.js

@@ -17,6 +17,8 @@ export { closeOnEscape } from './core/utils/close-on-escape/close-on-escape.js';
 export { noop } from './core/utils/noop/noop.js';
 export { getFontSize, getLineHeight, getRadius, getShadow, getSize, getSpacing } from './core/utils/get-size/get-size.js';
 export { createVarsResolver } from './core/styles-api/create-vars-resolver/create-vars-resolver.js';
+export { resolveClassNames } from './core/styles-api/use-styles/get-class-name/resolve-class-names/resolve-class-names.js';
+export { resolveStyles } from './core/styles-api/use-styles/get-style/resolve-styles/resolve-styles.js';
 export { FOCUS_CLASS_NAMES } from './core/styles-api/use-styles/get-class-name/get-global-class-names/get-global-class-names.js';
 export { useStyles } from './core/styles-api/use-styles/use-styles.js';
 export { DEFAULT_THEME } from './core/MantineProvider/default-theme.js';
@@ -82,9 +84,29 @@ export { Code } from './components/Code/Code.js';
 export { Collapse } from './components/Collapse/Collapse.js';
 export { ColorPicker } from './components/ColorPicker/ColorPicker.js';
 export { ColorSwatch } from './components/ColorSwatch/ColorSwatch.js';
+export { getParsedComboboxData } from './components/Combobox/get-parsed-combobox-data/get-parsed-combobox-data.js';
+export { ComboboxChevron } from './components/Combobox/ComboboxChevron/ComboboxChevron.js';
+export { Combobox } from './components/Combobox/Combobox.js';
+export { ComboboxDropdown } from './components/Combobox/ComboboxDropdown/ComboboxDropdown.js';
+export { ComboboxOptions } from './components/Combobox/ComboboxOptions/ComboboxOptions.js';
+export { ComboboxOption } from './components/Combobox/ComboboxOption/ComboboxOption.js';
+export { ComboboxTarget } from './components/Combobox/ComboboxTarget/ComboboxTarget.js';
+export { ComboboxSearch } from './components/Combobox/ComboboxSearch/ComboboxSearch.js';
+export { ComboboxEmpty } from './components/Combobox/ComboboxEmpty/ComboboxEmpty.js';
+export { useCombobox } from './components/Combobox/use-combobox/use-combobox.js';
+export { useVirtualizedCombobox } from './components/Combobox/use-combobox/use-virtualized-combobox.js';
+export { useComboboxTargetProps } from './components/Combobox/use-combobox-target-props/use-combobox-target-props.js';
 export { Container } from './components/Container/Container.js';
 export { CopyButton } from './components/CopyButton/CopyButton.js';
 export { Divider } from './components/Divider/Divider.js';
+export { Drawer } from './components/Drawer/Drawer.js';
+export { DrawerRoot } from './components/Drawer/DrawerRoot.js';
+export { DrawerBody } from './components/Drawer/DrawerBody.js';
+export { DrawerCloseButton } from './components/Drawer/DrawerCloseButton.js';
+export { DrawerContent } from './components/Drawer/DrawerContent.js';
+export { DrawerHeader } from './components/Drawer/DrawerHeader.js';
+export { DrawerOverlay } from './components/Drawer/DrawerOverlay.js';
+export { DrawerTitle } from './components/Drawer/DrawerTitle.js';
 export { Fieldset } from './components/Fieldset/Fieldset.js';
 export { FileButton } from './components/FileButton/FileButton.js';
 export { useDelayedHover } from './components/Floating/use-delayed-hover.js';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Combobox/Combobox.context.d.ts

@@ -0,0 +1,15 @@
+import { GetStylesApi, MantineSize } from '../../core';
+import type { ComboboxFactory } from './Combobox';
+import type { ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
+import type { ComboboxStore } from './use-combobox/use-combobox';
+export interface ComboboxContextValue {
+    getStyles: GetStylesApi<ComboboxFactory>;
+    store: ComboboxStore;
+    onOptionSelect?(value: string, optionProps: ComboboxOptionProps): void;
+    size: MantineSize | (string & {});
+    resetSelectionOnOptionHover: boolean | undefined;
+}
+export declare const ComboboxProvider: ({ children, value }: {
+    value: ComboboxContextValue;
+    children: import("react").ReactNode;
+}) => JSX.Element, useComboboxContext: () => ComboboxContextValue;

package/lib/components/Combobox/Combobox.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StylesApiProps, Factory, MantineSize } from '../../core';
+import { __PopoverProps } from '../Popover';
+import { ComboboxStore } from './use-combobox/use-combobox';
+import { ComboboxTarget } from './ComboboxTarget/ComboboxTarget';
+import { ComboboxDropdown } from './ComboboxDropdown/ComboboxDropdown';
+import { ComboboxOptions } from './ComboboxOptions/ComboboxOptions';
+import { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';
+import { ComboboxSearch } from './ComboboxSearch/ComboboxSearch';
+import { ComboboxEmpty } from './ComboboxEmpty/ComboboxEmpty';
+import { ComboboxChevron } from './ComboboxChevron/ComboboxChevron';
+export type ComboboxStylesNames = 'options' | 'dropdown' | 'option' | 'search' | 'empty';
+export type ComboboxCSSVariables = {
+    dropdown: '--combobox-option-fz' | '--combobox-padding' | '--combobox-option-padding';
+};
+export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {
+    /** Combobox content */
+    children: React.ReactNode;
+    /** Combobox store, can be used to control combobox state */
+    store?: ComboboxStore;
+    /** Called when item is selected with `Enter` key or by clicking it */
+    onOptionSelect?(value: string, optionProps: ComboboxOptionProps): void;
+    /** Controls items `font-size` and `padding`, `'sm'` by default */
+    size?: MantineSize | (string & {});
+    /** Controls `padding` of the dropdown, `4` by default */
+    dropdownPadding?: React.CSSProperties['padding'];
+    /** Determines whether selection should be reset when option is hovered, `false` by default */
+    resetSelectionOnOptionHover?: boolean;
+}
+export type ComboboxFactory = Factory<{
+    props: ComboboxProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxStylesNames;
+    vars: ComboboxCSSVariables;
+    staticComponents: {
+        Target: typeof ComboboxTarget;
+        Dropdown: typeof ComboboxDropdown;
+        Options: typeof ComboboxOptions;
+        Option: typeof ComboboxOption;
+        Search: typeof ComboboxSearch;
+        Empty: typeof ComboboxEmpty;
+        Chevron: typeof ComboboxChevron;
+    };
+}>;
+export declare function Combobox(_props: ComboboxProps): JSX.Element;
+export declare namespace Combobox {
+    var classes: any;
+    var displayName: string;
+    var Target: import("../../core").MantineComponent<{
+        props: import("./ComboboxTarget/ComboboxTarget").ComboboxTargetProps;
+        ref: HTMLElement;
+        compound: true;
+    }>;
+    var Dropdown: import("../../core").MantineComponent<{
+        props: import("./ComboboxDropdown/ComboboxDropdown").ComboboxDropdownProps;
+        ref: HTMLDivElement;
+        stylesNames: "dropdown";
+        compound: true;
+    }>;
+    var Options: import("../../core").MantineComponent<{
+        props: import("./ComboboxOptions/ComboboxOptions").ComboboxOptionsProps;
+        ref: HTMLDivElement;
+        stylesNames: "options";
+        compound: true;
+    }>;
+    var Option: import("../../core").MantineComponent<{
+        props: ComboboxOptionProps;
+        ref: HTMLDivElement;
+        stylesNames: "option";
+        compound: true;
+    }>;
+    var Search: import("../../core").MantineComponent<{
+        props: import("./ComboboxSearch/ComboboxSearch").ComboboxSearchProps;
+        ref: HTMLInputElement;
+        stylesNames: import("..").InputStylesNames;
+    }>;
+    var Empty: import("../../core").MantineComponent<{
+        props: import("./ComboboxEmpty/ComboboxEmpty").ComboboxEmptyProps;
+        ref: HTMLDivElement;
+        stylesNames: "empty";
+        compound: true;
+    }>;
+    var Chevron: import("../../core").MantineComponent<{
+        props: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronProps;
+        ref: SVGSVGElement;
+        stylesNames: "root";
+        vars: import("./ComboboxChevron/ComboboxChevron").ComboboxChevronCSSVariables;
+    }>;
+}

package/lib/components/Combobox/ComboboxChevron/ComboboxChevron.d.ts

@@ -1,8 +1,22 @@
 import React from 'react';
-import { MantineSize } from '../../../core';
-interface ComboboxChevronProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'display'> {
-    size: MantineSize | (string & {});
-    error: React.ReactNode;
+import { MantineSize, BoxProps, ElementProps, Factory, StylesApiProps } from '../../../core';
+export type ComboboxChevronStylesNames = 'root';
+export type ComboboxChevronCSSVariables = {
+    root: '--combobox-chevron-size';
+};
+export interface ComboboxChevronProps extends BoxProps, StylesApiProps<ComboboxChevronFactory>, ElementProps<'svg', 'opacity' | 'display'> {
+    size?: MantineSize | (string & {});
+    error?: React.ReactNode;
 }
-export declare function ComboboxChevron({ size, error, style, className, ...others }: ComboboxChevronProps): JSX.Element;
-export {};
+export type ComboboxChevronFactory = Factory<{
+    props: ComboboxChevronProps;
+    ref: SVGSVGElement;
+    stylesNames: ComboboxChevronStylesNames;
+    vars: ComboboxChevronCSSVariables;
+}>;
+export declare const ComboboxChevron: import("../../../core").MantineComponent<{
+    props: ComboboxChevronProps;
+    ref: SVGSVGElement;
+    stylesNames: ComboboxChevronStylesNames;
+    vars: ComboboxChevronCSSVariables;
+}>;

package/lib/components/Combobox/ComboboxDropdown/ComboboxDropdown.d.ts

@@ -0,0 +1,19 @@
+import { Factory } from '../../../core';
+import { PopoverDropdownProps } from '../../Popover';
+export type ComboboxDropdownStylesNames = 'dropdown';
+export interface ComboboxDropdownProps extends PopoverDropdownProps {
+    /** Determines whether the dropdown should be hidden, for example, when there are no options to display */
+    hidden?: boolean;
+}
+export type ComboboxDropdownFactory = Factory<{
+    props: ComboboxDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxDropdownStylesNames;
+    compound: true;
+}>;
+export declare const ComboboxDropdown: import("../../../core").MantineComponent<{
+    props: ComboboxDropdownProps;
+    ref: HTMLDivElement;
+    stylesNames: ComboboxDropdownStylesNames;
+    compound: true;
+}>;