@mantine/core 9.1.0 → 9.2.0

package/cjs/components/Autocomplete/Autocomplete.cjs

@@ -14,7 +14,11 @@ let _mantine_hooks = require("@mantine/hooks");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx
 const Autocomplete = require_factory.factory((_props) => {
-	const props = require_use_props.useProps("Autocomplete", { size: "sm" }, _props);
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"Autocomplete"
+	], { size: "sm" }, _props);
 	const { classNames, styles, unstyled, vars, dropdownOpened, defaultDropdownOpened, onDropdownClose, onDropdownOpen, onFocus, onBlur, onClick, onChange, data, value, defaultValue, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, readOnly, disabled, filter, limit, withScrollArea, maxDropdownHeight, size, id, renderOption, autoComplete, scrollAreaProps, onClear, clearButtonProps, error, clearable, clearSectionMode, rightSection, autoSelectOnBlur, openOnFocus = true, attributes, ...others } = props;
 	const _id = (0, _mantine_hooks.useId)(id);
 	const parsedData = require_get_parsed_combobox_data.getParsedComboboxData(data);

package/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps(\n    'Autocomplete',\n    { size: 'sm' } satisfies Partial<AutocompleteProps>,\n    _props\n  );\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete} withExpandedAttribute>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n\nexport namespace Autocomplete {\n  export type Props = AutocompleteProps;\n  export type StylesNames = AutocompleteStylesNames;\n  export type RenderOption = RenderAutocompleteOption;\n  export type Factory = AutocompleteFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.cjs","names":["factory","useProps","getParsedComboboxData","getOptionsLockup","useCombobox","useResolvedStylesApi","Combobox","InputBase","OptionsDropdown"],"sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  Primitive,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport {\n  Combobox,\n  ComboboxGenericData,\n  ComboboxGenericItem,\n  ComboboxLikeProps,\n  ComboboxLikeRenderOptionInput,\n  ComboboxLikeStylesNames,\n  getOptionsLockup,\n  getParsedComboboxData,\n  OptionsDropdown,\n  OptionsFilter,\n  useCombobox,\n} from '../Combobox';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  InputClearButtonProps,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type RenderAutocompleteOption = (\n  input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n  extends\n    BoxProps,\n    Omit<__BaseInputProps, 'pointer'>,\n    Omit<ComboboxLikeProps, 'data'>,\n    StylesApiProps<AutocompleteFactory>,\n    ElementProps<'input', 'onChange' | 'size'> {\n  /** Data used to display options. Values must be unique. */\n  data?: ComboboxGenericData;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Function to render custom option content */\n  renderOption?: RenderAutocompleteOption;\n\n  /** Props passed to the underlying `ScrollArea` component in the dropdown */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** Called when the clear button is clicked */\n  onClear?: () => void;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: InputClearButtonProps;\n\n  /** If set, the clear button is displayed when the component has a value @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** If set, the highlighted option is selected when the input loses focus @default false */\n  autoSelectOnBlur?: boolean;\n\n  /** If set, the dropdown opens when the input receives focus @default true */\n  openOnFocus?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n  props: AutocompleteProps;\n  ref: HTMLInputElement;\n  stylesNames: AutocompleteStylesNames;\n  variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory<AutocompleteFactory>((_props) => {\n  const props = useProps(\n    ['Input', 'InputWrapper', 'Autocomplete'],\n    { size: 'sm' } satisfies Partial<AutocompleteProps>,\n    _props\n  );\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    dropdownOpened,\n    defaultDropdownOpened,\n    onDropdownClose,\n    onDropdownOpen,\n    onFocus,\n    onBlur,\n    onClick,\n    onChange,\n    data,\n    value,\n    defaultValue,\n    selectFirstOptionOnChange,\n    selectFirstOptionOnDropdownOpen,\n    onOptionSubmit,\n    comboboxProps,\n    readOnly,\n    disabled,\n    filter,\n    limit,\n    withScrollArea,\n    maxDropdownHeight,\n    size,\n    id,\n    renderOption,\n    autoComplete,\n    scrollAreaProps,\n    onClear,\n    clearButtonProps,\n    error,\n    clearable,\n    clearSectionMode,\n    rightSection,\n    autoSelectOnBlur,\n    openOnFocus = true,\n    attributes,\n    ...others\n  } = props;\n\n  const _id = useId(id);\n  const parsedData = getParsedComboboxData(data);\n  const optionsLockup = getOptionsLockup(parsedData);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const combobox = useCombobox({\n    opened: dropdownOpened,\n    defaultOpened: defaultDropdownOpened,\n    onDropdownOpen: () => {\n      onDropdownOpen?.();\n      if (selectFirstOptionOnDropdownOpen) {\n        combobox.selectFirstOption();\n      }\n    },\n    onDropdownClose: () => {\n      onDropdownClose?.();\n      // Required for autoSelectOnBlur to work correctly\n      setTimeout(combobox.resetSelectedOption, 0);\n    },\n  });\n\n  const handleValueChange = (value: string) => {\n    setValue(value);\n    combobox.resetSelectedOption();\n  };\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<AutocompleteFactory>({\n    props,\n    styles,\n    classNames,\n  });\n\n  useEffect(() => {\n    if (selectFirstOptionOnChange) {\n      combobox.selectFirstOption();\n    }\n  }, [selectFirstOptionOnChange, _value]);\n\n  const clearButton = (\n    <Combobox.ClearButton\n      {...clearButtonProps}\n      onClear={() => {\n        handleValueChange('');\n        onClear?.();\n      }}\n    />\n  );\n\n  return (\n    <Combobox\n      store={combobox}\n      __staticSelector=\"Autocomplete\"\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      unstyled={unstyled}\n      readOnly={readOnly}\n      size={size}\n      attributes={attributes}\n      keepMounted={autoSelectOnBlur}\n      onOptionSubmit={(val) => {\n        onOptionSubmit?.(val);\n        handleValueChange(optionsLockup[val].label);\n        combobox.closeDropdown();\n      }}\n      {...comboboxProps}\n    >\n      <Combobox.Target autoComplete={autoComplete} withExpandedAttribute>\n        <InputBase\n          {...others}\n          size={size}\n          __staticSelector=\"Autocomplete\"\n          __clearSection={clearButton}\n          __clearable={clearable && !!_value && !disabled && !readOnly}\n          __clearSectionMode={clearSectionMode}\n          rightSection={rightSection}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={_value}\n          error={error}\n          onChange={(event) => {\n            handleValueChange(event.currentTarget.value);\n            combobox.openDropdown();\n            selectFirstOptionOnChange && combobox.selectFirstOption();\n          }}\n          onFocus={(event) => {\n            openOnFocus && combobox.openDropdown();\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            if (autoSelectOnBlur) {\n              combobox.clickSelectedOption();\n            }\n\n            combobox.closeDropdown();\n            onBlur?.(event);\n          }}\n          onClick={(event) => {\n            combobox.openDropdown();\n            onClick?.(event);\n          }}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          attributes={attributes}\n          id={_id}\n        />\n      </Combobox.Target>\n      <OptionsDropdown\n        data={parsedData}\n        hidden={readOnly || disabled}\n        filter={filter as OptionsFilter<Primitive> | undefined}\n        search={_value}\n        limit={limit}\n        hiddenWhenEmpty\n        withScrollArea={withScrollArea}\n        maxDropdownHeight={maxDropdownHeight}\n        unstyled={unstyled}\n        labelId={others.label ? `${_id}-label` : undefined}\n        aria-label={others.label ? undefined : others['aria-label']}\n        renderOption={renderOption}\n        scrollAreaProps={scrollAreaProps}\n      />\n    </Combobox>\n  );\n});\n\nAutocomplete.classes = { ...InputBase.classes, ...Combobox.classes };\nAutocomplete.displayName = '@mantine/core/Autocomplete';\n\nexport namespace Autocomplete {\n  export type Props = AutocompleteProps;\n  export type StylesNames = AutocompleteStylesNames;\n  export type RenderOption = RenderAutocompleteOption;\n  export type Factory = AutocompleteFactory;\n}\n"],"mappings":"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"}

package/cjs/components/Card/Card.cjs

@@ -32,7 +32,7 @@ const Card = require_polymorphic_factory.polymorphicFactory((_props) => {
 	});
 	const _children = react.Children.toArray(children);
 	const content = _children.map((child, index) => {
-		if (typeof child === "object" && child && "type" in child && child.type === require_CardSection.CardSection) return (0, react.cloneElement)(child, {
+		if (typeof child === "object" && child && "type" in child && (child.type === require_CardSection.CardSection || child.type?.displayName === "@mantine/core/CardSection")) return (0, react.cloneElement)(child, {
 			"data-orientation": orientation,
 			"data-first-section": index === 0 || void 0,
 			"data-last-section": index === _children.length - 1 || void 0

package/cjs/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (typeof child === 'object' && child && 'type' in child && child.type === CardSection) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n  export type Props = CardProps;\n  export type StylesNames = CardStylesNames;\n  export type CssVariables = CardCssVariables;\n  export type Factory = CardFactory;\n  export type SectionProps = CardSectionProps;\n\n  export namespace Section {\n    export type Props = CardSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MAAI,OAAO,UAAU,YAAY,SAAS,UAAU,SAAS,MAAM,SAASC,oBAAAA,YAC1E,SAAA,GAAA,MAAA,cAAoB,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAUH,oBAAAA"}
+{"version":3,"file":"Card.cjs","names":["createVarsResolver","getSpacing","polymorphicFactory","useProps","useStyles","Children","CardSection","CardProvider","Paper","classes"],"sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n  BoxProps,\n  createVarsResolver,\n  getSpacing,\n  MantineRadius,\n  MantineShadow,\n  MantineSpacing,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { Paper } from '../Paper';\nimport { CardProvider } from './Card.context';\nimport { CardSection, type CardSectionProps } from './CardSection/CardSection';\nimport classes from './Card.module.css';\nexport type CardStylesNames = 'root' | 'section';\nexport type CardCssVariables = {\n  root: '--card-padding';\n};\n\nexport interface CardProps extends BoxProps, StylesApiProps<CardFactory> {\n  /** Key of `theme.shadows` or any valid CSS value to set `box-shadow` */\n  shadow?: MantineShadow;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Adds border to the card */\n  withBorder?: boolean;\n\n  /** Key of `theme.spacing` or any valid CSS value to set padding @default 'md' */\n  padding?: MantineSpacing;\n\n  /** Card content */\n  children?: React.ReactNode;\n\n  /** Card orientation @default 'vertical' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type CardFactory = PolymorphicFactory<{\n  props: CardProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: CardStylesNames;\n  vars: CardCssVariables;\n  staticComponents: {\n    Section: typeof CardSection;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<CardFactory>((_, { padding }) => ({\n  root: {\n    '--card-padding': getSpacing(padding),\n  },\n}));\n\nconst defaultProps = {\n  orientation: 'vertical',\n} satisfies Partial<CardProps>;\n\nexport const Card = polymorphicFactory<CardFactory>((_props) => {\n  const props = useProps('Card', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    padding,\n    attributes,\n    orientation,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CardFactory>({\n    name: 'Card',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const _children = Children.toArray(children);\n  const content = _children.map((child, index) => {\n    if (\n      typeof child === 'object' &&\n      child &&\n      'type' in child &&\n      (child.type === CardSection ||\n        (child.type as any)?.displayName === '@mantine/core/CardSection')\n    ) {\n      return cloneElement(child, {\n        'data-orientation': orientation,\n        'data-first-section': index === 0 || undefined,\n        'data-last-section': index === _children.length - 1 || undefined,\n      } as any);\n    }\n\n    return child;\n  });\n\n  return (\n    <CardProvider value={{ getStyles }}>\n      <Paper unstyled={unstyled} data-orientation={orientation} {...getStyles('root')} {...others}>\n        {content}\n      </Paper>\n    </CardProvider>\n  );\n});\n\nCard.classes = classes;\nCard.varsResolver = varsResolver;\nCard.displayName = '@mantine/core/Card';\nCard.Section = CardSection;\n\nexport namespace Card {\n  export type Props = CardProps;\n  export type StylesNames = CardStylesNames;\n  export type CssVariables = CardCssVariables;\n  export type Factory = CardFactory;\n  export type SectionProps = CardSectionProps;\n\n  export namespace Section {\n    export type Props = CardSectionProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAM,eAAeA,6BAAAA,oBAAiC,GAAG,EAAE,eAAe,EACxE,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,QAAQ,EACtC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,aAAa,YACd;AAED,MAAa,OAAOC,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,SACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAYC,MAAAA,SAAS,QAAQ,SAAS;CAC5C,MAAM,UAAU,UAAU,KAAK,OAAO,UAAU;AAC9C,MACE,OAAO,UAAU,YACjB,SACA,UAAU,UACT,MAAM,SAASC,oBAAAA,eACb,MAAM,MAAc,gBAAgB,6BAEvC,SAAA,GAAA,MAAA,cAAoB,OAAO;GACzB,oBAAoB;GACpB,sBAAsB,UAAU,KAAK,KAAA;GACrC,qBAAqB,UAAU,UAAU,SAAS,KAAK,KAAA;GACxD,CAAQ;AAGX,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EAAc,OAAO,EAAE,WAAW;YAChC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;GAAiB;GAAU,oBAAkB;GAAa,GAAI,UAAU,OAAO;GAAE,GAAI;aAClF;GACK,CAAA;EACK,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,UAAUH,oBAAAA"}

package/cjs/components/Checkbox/Checkbox.cjs

@@ -111,7 +111,10 @@ const Checkbox = require_factory.factory((_props) => {
 				component: "input",
 				id: uuid,
 				ref: (0, _mantine_hooks.useMergedRef)(inputRef, ref),
-				mod: { error: !!error },
+				mod: {
+					error: !!error,
+					"with-error-styles": withErrorStyles
+				},
 				...getStyles("input", {
 					focusable: true,
 					variant

package/cjs/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["CheckboxIcon","createVarsResolver","parseThemeColor","getSize","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","CheckboxGroupContext","useStyles","extractStyleProps","InlineInput","Box","classes","InlineInputClasses","CheckboxGroup","CheckboxIndicator","CheckboxCard"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { use, useEffect, useRef } from 'react';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  CheckboxCard,\n  type CheckboxCardProps,\n  type CheckboxCardStylesNames,\n  type CheckboxCardCssVariables,\n  type CheckboxCardFactory,\n} from './CheckboxCard/CheckboxCard';\nimport {\n  CheckboxGroup,\n  CheckboxGroupContext,\n  type CheckboxGroupProps,\n  type CheckboxGroupStylesNames,\n  type CheckboxGroupFactory,\n} from './CheckboxGroup/CheckboxGroup';\nimport {\n  CheckboxIndicator,\n  type CheckboxIndicatorProps,\n  type CheckboxIndicatorStylesNames,\n  type CheckboxIndicatorCssVariables,\n  type CheckboxIndicatorFactory,\n  type CheckboxIndicatorVariant,\n} from './CheckboxIndicator/CheckboxIndicator';\nimport { CheckboxIcon } from './CheckIcon';\nimport classes from './Checkbox.module.css';\nexport type CheckboxVariant = 'filled' | 'outline';\nexport type CheckboxStylesNames = 'icon' | 'inner' | 'input' | InlineInputStylesNames;\nexport type CheckboxCssVariables = {\n  root: '--checkbox-size' | '--checkbox-radius' | '--checkbox-color' | '--checkbox-icon-color';\n};\n\nexport type CheckboxIconComponent = React.FC<{\n  indeterminate: boolean | undefined;\n  className: string;\n}>;\n\nexport interface CheckboxProps\n  extends BoxProps, StylesApiProps<CheckboxFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Unique input id */\n  id?: string;\n\n  /** `label` associated with the checkbox */\n  label?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description below the label */\n  description?: React.ReactNode;\n\n  /** Error message below the label */\n  error?: React.ReactNode;\n\n  /** Indeterminate state of the checkbox. If set, `checked` prop is dismissed. */\n  indeterminate?: boolean;\n\n  /** Icon for checked or indeterminate state */\n  icon?: CheckboxIconComponent;\n\n  /** Root element ref */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of `theme.colors` or any valid CSS color to set icon color. By default, depends on `theme.autoContrast`. */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts icon color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the checkbox when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type CheckboxFactory = Factory<{\n  props: CheckboxProps;\n  ref: HTMLInputElement;\n  stylesNames: CheckboxStylesNames;\n  vars: CheckboxCssVariables;\n  variant: CheckboxVariant;\n  staticComponents: {\n    Group: typeof CheckboxGroup;\n    Indicator: typeof CheckboxIndicator;\n    Card: typeof CheckboxCard;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  icon: CheckboxIcon,\n  withErrorStyles: true,\n  variant: 'filled',\n  radius: 'sm',\n} satisfies Partial<CheckboxProps>;\n\nconst varsResolver = createVarsResolver<CheckboxFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--checkbox-size': getSize(size, 'checkbox-size'),\n        '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n        '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--checkbox-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const Checkbox = factory<CheckboxFactory>((_props) => {\n  const props = useProps('Checkbox', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    label,\n    id,\n    size,\n    radius,\n    wrapperProps,\n    checked,\n    labelPosition,\n    description,\n    error,\n    disabled,\n    variant,\n    indeterminate,\n    icon: Icon,\n    rootRef,\n    iconColor,\n    onChange,\n    autoContrast,\n    mod,\n    attributes,\n    readOnly,\n    onClick,\n    withErrorStyles,\n    ref,\n    ...others\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const ctx = use(CheckboxGroupContext);\n  const _size = size || ctx?.size;\n\n  const getStyles = useStyles<CheckboxFactory>({\n    name: 'Checkbox',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n\n  const withContextProps = {\n    checked: ctx?.value.includes(rest.value as string) ?? checked,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n  };\n\n  const isDisabledByGroup = ctx?.isDisabled?.(rest.value as string) ?? false;\n  const finalDisabled = disabled || isDisabledByGroup;\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = indeterminate || false;\n\n      if (indeterminate) {\n        inputRef.current.setAttribute('data-indeterminate', 'true');\n      } else {\n        inputRef.current.removeAttribute('data-indeterminate');\n      }\n    }\n  }, [indeterminate]);\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Checkbox\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={_size}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={finalDisabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={withContextProps.checked || checked || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      inert={rest.inert}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'data-label-position': labelPosition }}>\n        <Box\n          component=\"input\"\n          id={uuid}\n          ref={useMergedRef(inputRef, ref)}\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          {...getStyles('input', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          disabled={finalDisabled}\n          inert={rest.inert}\n          type=\"checkbox\"\n          onClick={(event) => {\n            if (readOnly) {\n              event.preventDefault();\n            }\n\n            onClick?.(event);\n          }}\n        />\n\n        <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n      </Box>\n    </InlineInput>\n  );\n});\n\nCheckbox.classes = { ...classes, ...InlineInputClasses };\nCheckbox.varsResolver = varsResolver;\nCheckbox.displayName = '@mantine/core/Checkbox';\nCheckbox.Group = CheckboxGroup;\nCheckbox.Indicator = CheckboxIndicator;\nCheckbox.Card = CheckboxCard;\n\nexport namespace Checkbox {\n  export type Props = CheckboxProps;\n  export type StylesNames = CheckboxStylesNames;\n  export type CssVariables = CheckboxCssVariables;\n  export type Factory = CheckboxFactory;\n  export type Variant = CheckboxVariant;\n  export type IconComponent = CheckboxIconComponent;\n\n  export namespace Group {\n    export type Props = CheckboxGroupProps;\n    export type StylesNames = CheckboxGroupStylesNames;\n    export type Factory = CheckboxGroupFactory;\n  }\n\n  export namespace Indicator {\n    export type Props = CheckboxIndicatorProps;\n    export type StylesNames = CheckboxIndicatorStylesNames;\n    export type CssVariables = CheckboxIndicatorCssVariables;\n    export type Factory = CheckboxIndicatorFactory;\n    export type Variant = CheckboxIndicatorVariant;\n  }\n\n  export namespace Card {\n    export type Props = CheckboxCardProps;\n    export type StylesNames = CheckboxCardStylesNames;\n    export type CssVariables = CheckboxCardCssVariables;\n    export type Factory = CheckboxCardFactory;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/ColorInput/ColorInput.cjs

@@ -41,7 +41,11 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size
 	colorPreview: { "--ci-preview-size": require_get_size.getSize(size, "ci-preview-size") }
 }));
 const ColorInput = require_factory.factory((_props) => {
-	const props = require_use_props.useProps("ColorInput", defaultProps, _props);
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"ColorInput"
+	], defaultProps, _props);
 	const { classNames, styles, unstyled, disallowInput, fixOnBlur, popoverProps, withPreview, withEyeDropper, eyeDropperIcon, closeOnColorSwatchClick, eyeDropperButtonProps, value, defaultValue, onChange, onChangeEnd, onClick, onFocus, onBlur, inputProps, format = "hex", wrapperProps, readOnly, withPicker, swatches, disabled, leftSection, rightSection, swatchesPerRow, ...others } = require_use_input_props.useInputProps("ColorInput", defaultProps, _props);
 	const getStyles = require_use_styles.useStyles({
 		name: "ColorInput",

package/cjs/components/ColorInput/ColorInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps('ColorInput', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useInputProps","useStyles","useResolvedStylesApi","ActionIcon","convertHsvaTo","parseColor","EyeDropperIcon","isColorValid","Input","Popover","ColorSwatch","classes","ColorPicker","InputBase"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n  __ColorPickerProps,\n  ColorPicker,\n  ColorPickerStylesNames,\n  convertHsvaTo,\n  isColorValid,\n  parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n  | 'dropdown'\n  | 'eyeDropperButton'\n  | 'eyeDropperIcon'\n  | 'colorPreview'\n  | ColorPickerStylesNames\n  | __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n  eyeDropperIcon: '--ci-eye-dropper-icon-size';\n  eyeDropperButton: '--ci-button-size';\n  colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    __ColorPickerProps,\n    StylesApiProps<ColorInputFactory>,\n    ElementProps<'input', 'size' | 'onChange' | 'value' | 'defaultValue'> {\n  /** If input is not allowed, the user can only pick value with color picker and swatches */\n  disallowInput?: boolean;\n\n  /** If set, the input value resets to the last known valid value when the input loses focus @default true */\n  fixOnBlur?: boolean;\n\n  /** Props passed down to the `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** If set, the preview color swatch is displayed in the left section of the input @default true */\n  withPreview?: boolean;\n\n  /** If set, the eye dropper button is displayed in the right section @default true */\n  withEyeDropper?: boolean;\n\n  /** An icon to replace the default eye dropper icon */\n  eyeDropperIcon?: React.ReactNode;\n\n  /** If set, the dropdown is closed when one of the color swatches is clicked @default false */\n  closeOnColorSwatchClick?: boolean;\n\n  /** Props passed down to the eye dropper button */\n  eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n  props: ColorInputProps;\n  ref: HTMLInputElement;\n  stylesNames: ColorInputStylesNames;\n  vars: ColorInputCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  format: 'hex',\n  fixOnBlur: true,\n  withPreview: true,\n  swatchesPerRow: 7,\n  withPicker: true,\n  popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n  withEyeDropper: true,\n  size: 'sm',\n  leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n  eyeDropperIcon: {\n    '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n  },\n\n  eyeDropperButton: {\n    '--ci-button-size': getSize(size, 'ci-button-size'),\n  },\n\n  colorPreview: {\n    '--ci-preview-size': getSize(size, 'ci-preview-size'),\n  },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'ColorInput'], defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    disallowInput,\n    fixOnBlur,\n    popoverProps,\n    withPreview,\n    withEyeDropper,\n    eyeDropperIcon,\n    closeOnColorSwatchClick,\n    eyeDropperButtonProps,\n    value,\n    defaultValue,\n    onChange,\n    onChangeEnd,\n    onClick,\n    onFocus,\n    onBlur,\n    inputProps,\n    format = 'hex',\n    wrapperProps,\n    readOnly,\n    withPicker,\n    swatches,\n    disabled,\n    leftSection,\n    rightSection,\n    swatchesPerRow,\n    ...others\n  } = useInputProps('ColorInput', defaultProps, _props);\n\n  const getStyles = useStyles<ColorInputFactory>({\n    name: 'ColorInput',\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'wrapper',\n    vars: props.vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n  const [lastValidValue, setLastValidValue] = useState('');\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n  const eyeDropper = (\n    <ActionIcon\n      {...eyeDropperButtonProps}\n      {...getStyles('eyeDropperButton', {\n        className: eyeDropperButtonProps?.className,\n        style: eyeDropperButtonProps?.style,\n      })}\n      variant=\"subtle\"\n      color=\"gray\"\n      unstyled={unstyled}\n      onClick={() =>\n        openEyeDropper()\n          .then((payload) => {\n            if (payload?.sRGBHex) {\n              const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n              setValue(color);\n              onChangeEnd?.(color);\n            }\n          })\n          .catch(() => {})\n      }\n    >\n      {eyeDropperIcon || <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n    </ActionIcon>\n  );\n\n  const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setDropdownOpened(true);\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    fixOnBlur && setValue(lastValidValue);\n    onBlur?.(event);\n    setDropdownOpened(false);\n  };\n\n  const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    onClick?.(event);\n    setDropdownOpened(true);\n  };\n\n  useEffect(() => {\n    if (isColorValid(_value) || _value.trim() === '') {\n      setLastValidValue(_value);\n    }\n  }, [_value]);\n\n  useDidUpdate(() => {\n    if (isColorValid(_value)) {\n      setValue(convertHsvaTo(format, parseColor(_value)));\n    }\n  }, [format]);\n\n  return (\n    <Input.Wrapper\n      {...wrapperProps}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      __staticSelector=\"ColorInput\"\n    >\n      <Popover\n        __staticSelector=\"ColorInput\"\n        position=\"bottom-start\"\n        offset={5}\n        opened={dropdownOpened}\n        {...popoverProps}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        withRoles={false}\n        disabled={\n          readOnly || (withPicker === false && (!Array.isArray(swatches) || swatches.length === 0))\n        }\n      >\n        <Popover.Target>\n          <Input<'input'>\n            autoComplete=\"off\"\n            {...others}\n            {...inputProps}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            disabled={disabled}\n            __staticSelector=\"ColorInput\"\n            onFocus={handleInputFocus}\n            onBlur={handleInputBlur}\n            onClick={handleInputClick}\n            spellCheck={false}\n            value={_value}\n            onChange={(event) => {\n              const inputValue = event.currentTarget.value;\n              setValue(inputValue);\n              if (isColorValid(inputValue)) {\n                onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n              }\n            }}\n            leftSection={\n              leftSection ||\n              (withPreview ? (\n                <ColorSwatch\n                  color={isColorValid(_value) ? _value : '#fff'}\n                  size=\"var(--ci-preview-size)\"\n                  {...getStyles('colorPreview')}\n                />\n              ) : null)\n            }\n            readOnly={disallowInput || readOnly}\n            pointer={disallowInput}\n            unstyled={unstyled}\n            rightSection={\n              rightSection ||\n              (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n            }\n          />\n        </Popover.Target>\n\n        <Popover.Dropdown\n          onMouseDown={(event) => event.preventDefault()}\n          className={classes.dropdown}\n        >\n          <ColorPicker\n            __staticSelector=\"ColorInput\"\n            value={_value}\n            onChange={setValue}\n            onChangeEnd={onChangeEnd}\n            format={format}\n            swatches={swatches}\n            swatchesPerRow={swatchesPerRow}\n            withPicker={withPicker}\n            size={inputProps.size}\n            focusable={false}\n            unstyled={unstyled}\n            styles={resolvedStyles}\n            classNames={resolvedClassNames}\n            onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n            attributes={wrapperProps.attributes}\n          />\n        </Popover.Dropdown>\n      </Popover>\n    </Input.Wrapper>\n  );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n  export type Props = ColorInputProps;\n  export type StylesNames = ColorInputStylesNames;\n  export type CssVariables = ColorInputCssVariables;\n  export type Factory = ColorInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoFA,MAAM,eAAe;CACnB,QAAQ;CACR,WAAW;CACX,aAAa;CACb,gBAAgB;CAChB,YAAY;CACZ,cAAc,EAAE,iBAAiB;EAAE,YAAY;EAAQ,UAAU;EAAG,EAAE;CACtE,gBAAgB;CAChB,MAAM;CACN,0BAA0B;CAC3B;AAED,MAAM,eAAeA,6BAAAA,oBAAuC,GAAG,EAAE,YAAY;CAC3E,gBAAgB,EACd,8BAA8BC,iBAAAA,QAAQ,MAAM,2BAA2B,EACxE;CAED,kBAAkB,EAChB,oBAAoBA,iBAAAA,QAAQ,MAAM,iBAAiB,EACpD;CAED,cAAc,EACZ,qBAAqBA,iBAAAA,QAAQ,MAAM,kBAAkB,EACtD;CACF,EAAE;AAEH,MAAa,aAAaC,gBAAAA,SAA4B,WAAW;CAC/D,MAAM,QAAQC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;EAAa,EAAE,cAAc,OAAO;CACrF,MAAM,EACJ,YACA,QACA,UACA,eACA,WACA,cACA,aACA,gBACA,gBACA,yBACA,uBACA,OACA,cACA,UACA,aACA,SACA,SACA,QACA,YACA,SAAS,OACT,cACA,UACA,YACA,UACA,UACA,aACA,cACA,gBACA,GAAG,WACDC,wBAAAA,cAAc,cAAc,cAAc,OAAO;CAErD,MAAM,YAAYC,mBAAAA,UAA6B;EAC7C,MAAM;EACN;EACA,SAAA,0BAAA;EACA;EACA;EACA;EACA,cAAc;EACd,MAAM,MAAM;EACZ;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAwC;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,MAAM;CAC3D,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,UAA8B,GAAG;CACxD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,EAAE,WAAW,qBAAqB,MAAM,oBAAA,GAAA,eAAA,gBAAkC;CAEhF,MAAM,aACJ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,GAAI;EACJ,GAAI,UAAU,oBAAoB;GAChC,WAAW,uBAAuB;GAClC,OAAO,uBAAuB;GAC/B,CAAC;EACF,SAAQ;EACR,OAAM;EACI;EACV,eACE,gBAAgB,CACb,MAAM,YAAY;AACjB,OAAI,SAAS,SAAS;IACpB,MAAM,QAAQC,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,QAAQ,QAAQ,CAAC;AAChE,aAAS,MAAM;AACf,kBAAc,MAAM;;IAEtB,CACD,YAAY,GAAG;YAGnB,kBAAkB,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD,EAAgB,GAAI,UAAU,iBAAiB,EAAI,CAAA;EAC3D,CAAA;CAGf,MAAM,oBAAoB,UAA8C;AACtE,YAAU,MAAM;AAChB,oBAAkB,KAAK;;CAGzB,MAAM,mBAAmB,UAA8C;AACrE,eAAa,SAAS,eAAe;AACrC,WAAS,MAAM;AACf,oBAAkB,MAAM;;CAG1B,MAAM,oBAAoB,UAA8C;AACtE,YAAU,MAAM;AAChB,oBAAkB,KAAK;;AAGzB,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAIC,gBAAAA,aAAa,OAAO,IAAI,OAAO,MAAM,KAAK,GAC5C,mBAAkB,OAAO;IAE1B,CAAC,OAAO,CAAC;AAEZ,EAAA,GAAA,eAAA,oBAAmB;AACjB,MAAIA,gBAAAA,aAAa,OAAO,CACtB,UAASH,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,OAAO,CAAC,CAAC;IAEpD,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACG,cAAAA,MAAM,SAAP;EACE,GAAI;EACJ,YAAY;EACZ,QAAQ;EACR,kBAAiB;YAEjB,iBAAA,GAAA,kBAAA,MAACC,gBAAAA,SAAD;GACE,kBAAiB;GACjB,UAAS;GACT,QAAQ;GACR,QAAQ;GACR,GAAI;GACJ,YAAY;GACZ,QAAQ;GACE;GACV,WAAW;GACX,UACE,YAAa,eAAe,UAAU,CAAC,MAAM,QAAQ,SAAS,IAAI,SAAS,WAAW;aAX1F,CAcE,iBAAA,GAAA,kBAAA,KAACA,gBAAAA,QAAQ,QAAT,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACD,cAAAA,OAAD;IACE,cAAa;IACb,GAAI;IACJ,GAAI;IACJ,YAAY;IACZ,QAAQ;IACE;IACV,kBAAiB;IACjB,SAAS;IACT,QAAQ;IACR,SAAS;IACT,YAAY;IACZ,OAAO;IACP,WAAW,UAAU;KACnB,MAAM,aAAa,MAAM,cAAc;AACvC,cAAS,WAAW;AACpB,SAAID,gBAAAA,aAAa,WAAW,CAC1B,eAAcH,mBAAAA,cAAc,QAAQC,gBAAAA,WAAW,WAAW,CAAC,CAAC;;IAGhE,aACE,gBACC,cACC,iBAAA,GAAA,kBAAA,KAACK,oBAAAA,aAAD;KACE,OAAOH,gBAAAA,aAAa,OAAO,GAAG,SAAS;KACvC,MAAK;KACL,GAAI,UAAU,eAAe;KAC7B,CAAA,GACA;IAEN,UAAU,iBAAiB;IAC3B,SAAS;IACC;IACV,cACE,iBACC,kBAAkB,CAAC,YAAY,CAAC,YAAY,sBAAsB,aAAa;IAElF,CAAA,EACa,CAAA,EAEjB,iBAAA,GAAA,kBAAA,KAACE,gBAAAA,QAAQ,UAAT;IACE,cAAc,UAAU,MAAM,gBAAgB;IAC9C,WAAWE,0BAAAA,QAAQ;cAEnB,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;KACE,kBAAiB;KACjB,OAAO;KACP,UAAU;KACG;KACL;KACE;KACM;KACJ;KACZ,MAAM,WAAW;KACjB,WAAW;KACD;KACV,QAAQ;KACR,YAAY;KACZ,0BAA0B,2BAA2B,kBAAkB,MAAM;KAC7E,YAAY,aAAa;KACzB,CAAA;IACe,CAAA,CACX;;EACI,CAAA;EAElB;AAEF,WAAW,UAAUC,kBAAAA,UAAU;AAC/B,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/Combobox/ComboboxClearButton/ComboboxClearButton.cjs

@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Input = require("../../Input/Input.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx
-function ComboboxClearButton({ size, onMouseDown, onClick, onClear, ...others }) {
+function ComboboxClearButton({ onMouseDown, onClick, onClear, ...others }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input.ClearButton, {
 		tabIndex: -1,
 		"aria-hidden": true,

package/cjs/components/Combobox/ComboboxClearButton/ComboboxClearButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxClearButton.cjs","names":["Input"],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n  onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n  size,\n  onMouseDown,\n  onClick,\n  onClear,\n  ...others\n}: ComboboxClearButtonProps) {\n  return (\n    <Input.ClearButton\n      tabIndex={-1}\n      aria-hidden\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        onClear();\n        onClick?.(event);\n      }}\n    />\n  );\n}\n\nComboboxClearButton.displayName = '@mantine/core/ComboboxClearButton';\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,EAClC,MACA,aACA,SACA,SACA,GAAG,UACwB;AAC3B,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,MAAM,aAAP;EACE,UAAU;EACV,eAAA;EACA,GAAI;EACJ,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,iBAAc,MAAM;;EAEtB,UAAU,UAAU;AAClB,YAAS;AACT,aAAU,MAAM;;EAElB,CAAA;;AAIN,oBAAoB,cAAc"}
+{"version":3,"file":"ComboboxClearButton.cjs","names":["Input"],"sources":["../../../../src/components/Combobox/ComboboxClearButton/ComboboxClearButton.tsx"],"sourcesContent":["import { ElementProps } from '../../../core';\nimport { Input, InputClearButtonProps } from '../../Input';\n\nexport interface ComboboxClearButtonProps extends InputClearButtonProps, ElementProps<'button'> {\n  onClear: () => void;\n}\n\nexport function ComboboxClearButton({\n  onMouseDown,\n  onClick,\n  onClear,\n  ...others\n}: ComboboxClearButtonProps) {\n  return (\n    <Input.ClearButton\n      tabIndex={-1}\n      aria-hidden\n      {...others}\n      onMouseDown={(event) => {\n        event.preventDefault();\n        onMouseDown?.(event);\n      }}\n      onClick={(event) => {\n        onClear();\n        onClick?.(event);\n      }}\n    />\n  );\n}\n\nComboboxClearButton.displayName = '@mantine/core/ComboboxClearButton';\n"],"mappings":";;;;;AAOA,SAAgB,oBAAoB,EAClC,aACA,SACA,SACA,GAAG,UACwB;AAC3B,QACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,MAAM,aAAP;EACE,UAAU;EACV,eAAA;EACA,GAAI;EACJ,cAAc,UAAU;AACtB,SAAM,gBAAgB;AACtB,iBAAc,MAAM;;EAEtB,UAAU,UAAU;AAClB,YAAS;AACT,aAAU,MAAM;;EAElB,CAAA;;AAIN,oBAAoB,cAAc"}

package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs

@@ -29,6 +29,7 @@ const ComboboxEventsTarget = require_factory.factory((props) => {
 			withKeyboardNavigation,
 			withExpandedAttribute,
 			onKeyDown: child.props.onKeyDown,
+			onClick: child.props.onClick,
 			autoComplete
 		}),
 		...others,

package/cjs/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;AAUhC,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAVkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;GACF,WAAA,GAAA,eAAA,cAAuB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}
+{"version":3,"file":"ComboboxEventsTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","getRefProp"],"sources":["../../../../src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxEventsTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to the keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events should be handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxEventsTargetProps>;\n\nexport type ComboboxEventsTargetFactory = Factory<{\n  props: ComboboxEventsTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  return cloneElement(child, {\n    ...targetProps,\n    ...others,\n    [refProp]: useMergedRef(ref, ctx.store.targetRef, getRefProp(child)),\n  });\n});\n\nComboboxEventsTarget.displayName = '@mantine/core/ComboboxEventsTarget';\n"],"mappings":";;;;;;;;;;;AAgCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,uBAAuBA,gBAAAA,SAAsC,UAAU;CAClF,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,wBAAwB,cAAc,MAAM;CAEzD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,0KACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;AAWhC,SAAA,GAAA,MAAA,cAAoB,OAAO;EACzB,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;GACF,WAAA,GAAA,eAAA,cAAuB,KAAK,IAAI,MAAM,WAAWC,qBAAAA,WAAW,MAAM,CAAC;EACrE,CAAC;EACF;AAEF,qBAAqB,cAAc"}

package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs

@@ -14,7 +14,7 @@ const defaultProps = {
 	withKeyboardNavigation: true
 };
 const ComboboxSearch = require_factory.factory((_props) => {
-	const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, withKeyboardNavigation, size, ref, ...others } = require_use_props.useProps("ComboboxSearch", defaultProps, _props);
+	const { classNames, styles, unstyled, vars, withAriaAttributes, onKeyDown, onClick, withKeyboardNavigation, size, ref, ...others } = require_use_props.useProps("ComboboxSearch", defaultProps, _props);
 	const ctx = require_Combobox_context.useComboboxContext();
 	const _styles = ctx.getStyles("search");
 	const targetProps = require_use_combobox_target_props.useComboboxTargetProps({
@@ -23,6 +23,7 @@ const ComboboxSearch = require_factory.factory((_props) => {
 		withKeyboardNavigation,
 		withExpandedAttribute: false,
 		onKeyDown,
+		onClick,
 		autoComplete: "off"
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {

package/cjs/components/Combobox/ComboboxSearch/ComboboxSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,wBACA,MACA,KACA,GAAG,WAXSC,kBAAAA,SAAS,kBAAkB,cAAc,OAAO;CAc9D,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,UAAU,IAAI,UAAU,SAAS;CAEvC,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA,cAAc;EACf,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EACE,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;EAC3C,YAAY,CAAC,EAAE,OAAO,QAAQ,WAAW,EAAE,WAAW;EACtD,QAAQ,CAAC,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO;EAC1C,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;EACjB,CAAA;EAEJ;AAEF,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}
+{"version":3,"file":"ComboboxSearch.cjs","names":["factory","useProps","useComboboxContext","useComboboxTargetProps","Input","classes"],"sources":["../../../../src/components/Combobox/ComboboxSearch/ComboboxSearch.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { ElementProps, factory, Factory, useProps } from '../../../core';\nimport { Input, InputProps, InputStylesNames } from '../../Input/Input';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxSearchStylesNames = InputStylesNames;\n\nexport interface ComboboxSearchProps extends InputProps, ElementProps<'input', 'size'> {\n  /** if set, the search input has `aria-` attribute @default true */\n  withAriaAttributes?: boolean;\n\n  /** if set, the search input handles keyboard navigation @default true */\n  withKeyboardNavigation?: boolean;\n}\n\nexport type ComboboxSearchFactory = Factory<{\n  props: ComboboxSearchProps;\n  ref: HTMLInputElement;\n  stylesNames: ComboboxSearchStylesNames;\n}>;\n\nconst defaultProps = {\n  withAriaAttributes: true,\n  withKeyboardNavigation: true,\n} satisfies Partial<ComboboxSearchProps>;\n\nexport const ComboboxSearch = factory<ComboboxSearchFactory>((_props) => {\n  const props = useProps('ComboboxSearch', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    withAriaAttributes,\n    onKeyDown,\n    onClick,\n    withKeyboardNavigation,\n    size,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = useComboboxContext();\n  const _styles = ctx.getStyles('search');\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'input',\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute: false,\n    onKeyDown,\n    onClick,\n    autoComplete: 'off',\n  });\n\n  return (\n    <Input\n      ref={useMergedRef(ref, ctx.store.searchRef)}\n      classNames={[{ input: _styles.className }, classNames] as any}\n      styles={[{ input: _styles.style }, styles] as any}\n      size={size || ctx.size}\n      {...targetProps}\n      {...others}\n      __staticSelector=\"Combobox\"\n    />\n  );\n});\n\nComboboxSearch.classes = classes;\nComboboxSearch.displayName = '@mantine/core/ComboboxSearch';\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,eAAe;CACnB,oBAAoB;CACpB,wBAAwB;CACzB;AAED,MAAa,iBAAiBA,gBAAAA,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,QACA,UACA,MACA,oBACA,WACA,SACA,wBACA,MACA,KACA,GAAG,WAZSC,kBAAAA,SAAS,kBAAkB,cAAc,OAAO;CAe9D,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,UAAU,IAAI,UAAU,SAAS;CAEvC,MAAM,cAAcC,kCAAAA,uBAAuB;EACzC,YAAY;EACZ;EACA;EACA,uBAAuB;EACvB;EACA;EACA,cAAc;EACf,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;EACE,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;EAC3C,YAAY,CAAC,EAAE,OAAO,QAAQ,WAAW,EAAE,WAAW;EACtD,QAAQ,CAAC,EAAE,OAAO,QAAQ,OAAO,EAAE,OAAO;EAC1C,MAAM,QAAQ,IAAI;EAClB,GAAI;EACJ,GAAI;EACJ,kBAAiB;EACjB,CAAA;EAEJ;AAEF,eAAe,UAAUC,wBAAAA;AACzB,eAAe,cAAc"}

package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs

@@ -30,6 +30,7 @@ const ComboboxTarget = require_factory.factory((props) => {
 			withKeyboardNavigation,
 			withExpandedAttribute,
 			onKeyDown: child.props.onKeyDown,
+			onClick: child.props.onClick,
 			autoComplete
 		}),
 		...others

package/cjs/components/Combobox/ComboboxTarget/ComboboxTarget.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","Popover"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;CAWhC,MAAM,iBAAA,GAAA,MAAA,cAA6B,OAAO;EACxC,GAVkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}
+{"version":3,"file":"ComboboxTarget.cjs","names":["factory","useProps","getSingleElementChild","useComboboxContext","useComboboxTargetProps","Popover"],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop that is used to access element ref */\n  refProp?: string;\n\n  /** If set, the component responds to keyboard events @default true */\n  withKeyboardNavigation?: boolean;\n\n  /** If set, the target has `aria-` attributes @default true */\n  withAriaAttributes?: boolean;\n\n  /** If set, the target has `aria-expanded` attribute @default false */\n  withExpandedAttribute?: boolean;\n\n  /** Determines which events is handled by the target element.\n   * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n   * @default input\n   * */\n  targetType?: 'button' | 'input';\n\n  /** Input autocomplete attribute */\n  autoComplete?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n  targetType: 'input',\n  withKeyboardNavigation: true,\n  withAriaAttributes: true,\n  withExpandedAttribute: false,\n  autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n  props: ComboboxTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useComboboxContext();\n\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,\n    ...others,\n  });\n\n  return (\n    <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n      {clonedElement}\n    </Popover.Target>\n  );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiBA,gBAAAA,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACDC,kBAAAA,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQC,iCAAAA,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAMC,yBAAAA,oBAAoB;CAYhC,MAAM,iBAAA,GAAA,MAAA,cAA6B,OAAO;EACxC,GAXkBC,kCAAAA,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC,SAAU,MAAM,MAAc;GAC9B;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,QAAQ,QAAT;EAAyB;EAAS,MAAA,GAAA,eAAA,cAAkB,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}

package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs

@@ -3,7 +3,7 @@ require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Combobox_context = require("../Combobox.context.cjs");
 let react = require("react");
 //#region packages/@mantine/core/src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts
-function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
+function useComboboxTargetProps({ onKeyDown, onClick, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete }) {
 	const ctx = require_Combobox_context.useComboboxContext();
 	const [selectedOptionId, setSelectedOptionId] = (0, react.useState)(null);
 	const handleKeyDown = (event) => {
@@ -47,18 +47,24 @@ function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAtt
 			}
 		}
 	};
+	const ariaAttributes = withAriaAttributes ? {
+		...withExpandedAttribute ? { role: "combobox" } : {},
+		"aria-haspopup": "listbox",
+		"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
+		"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
+		"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
+		autoComplete,
+		"data-expanded": ctx.store.dropdownOpened || void 0,
+		"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
+	} : {};
+	const handleClick = (event) => {
+		if (targetType === "button") event.currentTarget.focus();
+		onClick?.(event);
+	};
 	return {
-		...withAriaAttributes ? {
-			...withExpandedAttribute ? { role: "combobox" } : {},
-			"aria-haspopup": "listbox",
-			"aria-expanded": withExpandedAttribute ? !!(ctx.store.listId && ctx.store.dropdownOpened) : void 0,
-			"aria-controls": ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : void 0,
-			"aria-activedescendant": ctx.store.dropdownOpened ? selectedOptionId || void 0 : void 0,
-			autoComplete,
-			"data-expanded": ctx.store.dropdownOpened || void 0,
-			"data-mantine-stop-propagation": ctx.store.dropdownOpened || void 0
-		} : {},
-		onKeyDown: handleKeyDown
+		...ariaAttributes,
+		onKeyDown: handleKeyDown,
+		onClick: handleClick
 	};
 }
 //#endregion

package/cjs/components/Combobox/use-combobox-target-props/use-combobox-target-props.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // oxlint-disable-next-line typescript/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n  };\n}\n"],"mappings":";;;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAwB5C,QAAO;EACL,GAnBqB,qBACnB;GACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;GAC9D,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}
+{"version":3,"file":"use-combobox-target-props.cjs","names":["useComboboxContext"],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n  targetType: 'input' | 'button' | undefined;\n  withAriaAttributes: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n  withExpandedAttribute: boolean | undefined;\n  onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;\n  onClick: React.MouseEventHandler<HTMLInputElement> | undefined;\n  autoComplete: string | undefined;\n}\n\nexport function useComboboxTargetProps({\n  onKeyDown,\n  onClick,\n  withKeyboardNavigation,\n  withAriaAttributes,\n  withExpandedAttribute,\n  targetType,\n  autoComplete,\n}: UseComboboxTargetPropsInput) {\n  const ctx = useComboboxContext();\n  const [selectedOptionId, setSelectedOptionId] = useState<string | null>(null);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (ctx.readOnly) {\n      return;\n    }\n\n    if (withKeyboardNavigation) {\n      // Ignore during composition in IME\n      if (event.nativeEvent.isComposing) {\n        return;\n      }\n\n      if (event.nativeEvent.code === 'ArrowDown') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectNextOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'ArrowUp') {\n        event.preventDefault();\n\n        if (!ctx.store.dropdownOpened) {\n          ctx.store.openDropdown('keyboard');\n          setSelectedOptionId(ctx.store.selectActiveOption());\n          ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n        } else {\n          setSelectedOptionId(ctx.store.selectPreviousOption());\n        }\n      }\n\n      if (event.nativeEvent.code === 'Enter' || event.nativeEvent.code === 'NumpadEnter') {\n        // This is a workaround for handling differences in behavior of isComposing property in Safari\n        // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n        // oxlint-disable-next-line typescript/no-deprecated\n        if (event.nativeEvent.keyCode === 229) {\n          return;\n        }\n\n        const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n        if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n          event.preventDefault();\n          ctx.store.clickSelectedOption();\n        } else if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.openDropdown('keyboard');\n        }\n      }\n\n      if (event.key === 'Escape') {\n        ctx.store.closeDropdown('keyboard');\n      }\n\n      if (event.nativeEvent.code === 'Space') {\n        if (targetType === 'button') {\n          event.preventDefault();\n          ctx.store.toggleDropdown('keyboard');\n        }\n      }\n    }\n  };\n\n  const ariaAttributes = withAriaAttributes\n    ? {\n        ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n        'aria-haspopup': 'listbox' as const,\n        'aria-expanded': withExpandedAttribute\n          ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n          : undefined,\n        'aria-controls':\n          ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n        'aria-activedescendant': ctx.store.dropdownOpened\n          ? selectedOptionId || undefined\n          : undefined,\n        autoComplete,\n        'data-expanded': ctx.store.dropdownOpened || undefined,\n        'data-mantine-stop-propagation': ctx.store.dropdownOpened || undefined,\n      }\n    : {};\n\n  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {\n    // Safari does not give keyboard focus to non-text-input elements (including\n    // readOnly inputs rendered as buttons) on click, which prevents onKeyDown\n    // from firing. Explicitly focus the target when targetType is 'button'.\n    if (targetType === 'button') {\n      event.currentTarget.focus();\n    }\n\n    onClick?.(event);\n  };\n\n  return {\n    ...ariaAttributes,\n    onKeyDown: handleKeyDown,\n    onClick: handleClick,\n  };\n}\n"],"mappings":";;;;;AAaA,SAAgB,uBAAuB,EACrC,WACA,SACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAMA,yBAAAA,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,wBAAA,GAAA,MAAA,UAA+C,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;CAM5C,MAAM,iBAAiB,qBACnB;EACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;EAC9D,iBAAiB;EACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;EACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;EACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;EACJ;EACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;EAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;EAC9D,GACD,EAAE;CAEN,MAAM,eAAe,UAA8C;AAIjE,MAAI,eAAe,SACjB,OAAM,cAAc,OAAO;AAG7B,YAAU,MAAM;;AAGlB,QAAO;EACL,GAAG;EACH,WAAW;EACX,SAAS;EACV"}

package/cjs/components/Combobox/use-pills-reorder/move-pill.cjs

@@ -0,0 +1,17 @@
+"use client";
+//#region packages/@mantine/core/src/components/Combobox/use-pills-reorder/move-pill.ts
+function movePill(value, from, to, position) {
+	if (from === to) return value;
+	if (position === "before" && to === from + 1) return value;
+	if (position === "after" && to === from - 1) return value;
+	const result = value.slice();
+	const [item] = result.splice(from, 1);
+	let targetIndex = from < to ? to - 1 : to;
+	if (position === "after") targetIndex += 1;
+	result.splice(targetIndex, 0, item);
+	return result;
+}
+//#endregion
+exports.movePill = movePill;
+
+//# sourceMappingURL=move-pill.cjs.map

package/cjs/components/Combobox/use-pills-reorder/move-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"move-pill.cjs","names":[],"sources":["../../../../src/components/Combobox/use-pills-reorder/move-pill.ts"],"sourcesContent":["export type PillReorderPosition = 'before' | 'after';\n\nexport function movePill<T>(\n  value: T[],\n  from: number,\n  to: number,\n  position: PillReorderPosition\n): T[] {\n  if (from === to) {\n    return value;\n  }\n\n  if (position === 'before' && to === from + 1) {\n    return value;\n  }\n\n  if (position === 'after' && to === from - 1) {\n    return value;\n  }\n\n  const result = value.slice();\n  const [item] = result.splice(from, 1);\n\n  let targetIndex = from < to ? to - 1 : to;\n  if (position === 'after') {\n    targetIndex += 1;\n  }\n\n  result.splice(targetIndex, 0, item);\n  return result;\n}\n"],"mappings":";;AAEA,SAAgB,SACd,OACA,MACA,IACA,UACK;AACL,KAAI,SAAS,GACX,QAAO;AAGT,KAAI,aAAa,YAAY,OAAO,OAAO,EACzC,QAAO;AAGT,KAAI,aAAa,WAAW,OAAO,OAAO,EACxC,QAAO;CAGT,MAAM,SAAS,MAAM,OAAO;CAC5B,MAAM,CAAC,QAAQ,OAAO,OAAO,MAAM,EAAE;CAErC,IAAI,cAAc,OAAO,KAAK,KAAK,IAAI;AACvC,KAAI,aAAa,QACf,gBAAe;AAGjB,QAAO,OAAO,aAAa,GAAG,KAAK;AACnC,QAAO"}