@mantine/core 9.1.0 → 9.2.0

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

@@ -0,0 +1,170 @@
+"use client";
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_move_pill = require("./move-pill.cjs");
+let react = require("react");
+//#region packages/@mantine/core/src/components/Combobox/use-pills-reorder/use-pills-reorder.ts
+const findSearchInput = (container) => {
+	const lastChild = container.lastElementChild;
+	if (!lastChild) return null;
+	if (lastChild instanceof HTMLInputElement) return lastChild;
+	return lastChild.querySelector("input");
+};
+const valuesMatch = (a, b) => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i += 1) if (a[i] !== b[i]) return false;
+	return true;
+};
+function usePillsReorder({ value, onChange, enabled }) {
+	const dragStateRef = (0, react.useRef)({
+		draggedIndex: null,
+		currentDropTarget: null
+	});
+	const pendingFocusRef = (0, react.useRef)(null);
+	const containerRef = (0, react.useRef)(null);
+	const valueRef = (0, react.useRef)(value);
+	valueRef.current = value;
+	(0, react.useEffect)(() => {
+		const pending = pendingFocusRef.current;
+		if (!pending) return;
+		pendingFocusRef.current = null;
+		if (!valuesMatch(valueRef.current, pending.expectedValue)) return;
+		pending.container?.querySelector(`[data-mantine-pill-index="${pending.index}"]`)?.focus();
+	});
+	const setContainer = (0, react.useCallback)((node) => {
+		containerRef.current = node;
+	}, []);
+	const getListProps = () => {
+		if (!enabled) return {};
+		return { ref: setContainer };
+	};
+	const handleInputKeyDown = (event) => {
+		if (!enabled || event.key !== "ArrowLeft") return;
+		const input = event.currentTarget;
+		if (!(input.value.length === 0 || input.selectionStart === 0 && input.selectionEnd === 0)) return;
+		const container = containerRef.current;
+		if (!container) return;
+		const pills = container.querySelectorAll("[data-mantine-pill-index]");
+		if (pills.length === 0) return;
+		event.preventDefault();
+		pills[pills.length - 1].focus();
+	};
+	const getPillProps = (index) => {
+		if (!enabled) return;
+		return {
+			draggable: true,
+			tabIndex: -1,
+			"data-mantine-pill-index": index,
+			"aria-keyshortcuts": "Alt+ArrowLeft Alt+ArrowRight",
+			onMouseDown: (event) => {
+				if (event.button === 0) event.stopPropagation();
+			},
+			onDragStart: (event) => {
+				event.stopPropagation();
+				event.dataTransfer.effectAllowed = "move";
+				event.dataTransfer.setData("text/plain", String(index));
+				dragStateRef.current.draggedIndex = index;
+				const target = event.currentTarget;
+				const rect = target.getBoundingClientRect();
+				const ghost = target.cloneNode(true);
+				ghost.removeAttribute("data-dragging");
+				ghost.removeAttribute("data-drag-over");
+				ghost.style.position = "fixed";
+				ghost.style.top = "-9999px";
+				ghost.style.left = "-9999px";
+				ghost.style.width = `${rect.width}px`;
+				ghost.style.height = `${rect.height}px`;
+				ghost.style.pointerEvents = "none";
+				document.body.appendChild(ghost);
+				event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);
+				setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);
+				requestAnimationFrame(() => {
+					target.setAttribute("data-dragging", "true");
+				});
+			},
+			onDragOver: (event) => {
+				const { draggedIndex } = dragStateRef.current;
+				if (draggedIndex === null || draggedIndex === index) return;
+				const target = event.currentTarget;
+				const rect = target.getBoundingClientRect();
+				const x = event.clientX - rect.left;
+				const position = (getComputedStyle(target).direction === "rtl" ? x > rect.width / 2 : x < rect.width / 2) ? "before" : "after";
+				event.preventDefault();
+				event.stopPropagation();
+				event.dataTransfer.dropEffect = "move";
+				const prevTarget = dragStateRef.current.currentDropTarget;
+				if (prevTarget && prevTarget !== target) prevTarget.removeAttribute("data-drag-over");
+				target.setAttribute("data-drag-over", position);
+				dragStateRef.current.currentDropTarget = target;
+			},
+			onDragLeave: (event) => {
+				const target = event.currentTarget;
+				const related = event.relatedTarget;
+				if (related && target.contains(related)) return;
+				target.removeAttribute("data-drag-over");
+				if (dragStateRef.current.currentDropTarget === target) dragStateRef.current.currentDropTarget = null;
+			},
+			onDrop: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const target = event.currentTarget;
+				const position = target.getAttribute("data-drag-over");
+				target.removeAttribute("data-drag-over");
+				const { draggedIndex } = dragStateRef.current;
+				if (draggedIndex !== null && position && draggedIndex !== index) {
+					const nextValue = require_move_pill.movePill(valueRef.current, draggedIndex, index, position);
+					if (nextValue !== valueRef.current) onChange(nextValue);
+				}
+				dragStateRef.current.draggedIndex = null;
+				dragStateRef.current.currentDropTarget = null;
+			},
+			onDragEnd: (event) => {
+				event.currentTarget.removeAttribute("data-dragging");
+				const prevTarget = dragStateRef.current.currentDropTarget;
+				if (prevTarget) prevTarget.removeAttribute("data-drag-over");
+				dragStateRef.current.draggedIndex = null;
+				dragStateRef.current.currentDropTarget = null;
+			},
+			onKeyDown: (event) => {
+				if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+				const target = event.currentTarget;
+				const movingForward = getComputedStyle(target).direction === "rtl" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+				const targetIndex = movingForward ? index + 1 : index - 1;
+				if (event.altKey) {
+					if (targetIndex < 0 || targetIndex >= valueRef.current.length) return;
+					event.preventDefault();
+					event.stopPropagation();
+					const position = movingForward ? "after" : "before";
+					const nextValue = require_move_pill.movePill(valueRef.current, index, targetIndex, position);
+					if (nextValue === valueRef.current) return;
+					pendingFocusRef.current = {
+						container: target.parentElement,
+						index: targetIndex,
+						expectedValue: nextValue
+					};
+					onChange(nextValue);
+					return;
+				}
+				if (targetIndex < 0) return;
+				const container = target.parentElement;
+				if (!container) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (targetIndex >= valueRef.current.length) {
+					findSearchInput(container)?.focus();
+					return;
+				}
+				container.querySelector(`[data-mantine-pill-index="${targetIndex}"]`)?.focus();
+			}
+		};
+	};
+	return {
+		getPillProps,
+		getListProps,
+		handleInputKeyDown
+	};
+}
+//#endregion
+exports.usePillsReorder = usePillsReorder;
+
+//# sourceMappingURL=use-pills-reorder.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-pills-reorder.cjs","names":["movePill"],"sources":["../../../../src/components/Combobox/use-pills-reorder/use-pills-reorder.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { movePill, PillReorderPosition } from './move-pill';\n\nexport interface PillReorderProps {\n  draggable: boolean;\n  tabIndex: number;\n  'data-mantine-pill-index': number;\n  'aria-keyshortcuts': string;\n  onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;\n  onDragStart: (event: React.DragEvent<HTMLElement>) => void;\n  onDragOver: (event: React.DragEvent<HTMLElement>) => void;\n  onDragLeave: (event: React.DragEvent<HTMLElement>) => void;\n  onDrop: (event: React.DragEvent<HTMLElement>) => void;\n  onDragEnd: (event: React.DragEvent<HTMLElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface PillsReorderListProps {\n  ref?: (node: HTMLDivElement | null) => void;\n}\n\nexport interface UsePillsReorderInput<T> {\n  value: T[];\n  onChange: (value: T[]) => void;\n  enabled: boolean | undefined;\n}\n\ninterface PillDragState {\n  draggedIndex: number | null;\n  currentDropTarget: HTMLElement | null;\n}\n\ninterface PendingFocus<T> {\n  container: HTMLElement | null;\n  index: number;\n  expectedValue: T[];\n}\n\nconst findSearchInput = (container: HTMLElement): HTMLInputElement | null => {\n  const lastChild = container.lastElementChild;\n  if (!lastChild) {\n    return null;\n  }\n  if (lastChild instanceof HTMLInputElement) {\n    return lastChild;\n  }\n  return lastChild.querySelector<HTMLInputElement>('input');\n};\n\nconst valuesMatch = <T>(a: T[], b: T[]): boolean => {\n  if (a === b) {\n    return true;\n  }\n  if (a.length !== b.length) {\n    return false;\n  }\n  for (let i = 0; i < a.length; i += 1) {\n    if (a[i] !== b[i]) {\n      return false;\n    }\n  }\n  return true;\n};\n\nexport function usePillsReorder<T>({ value, onChange, enabled }: UsePillsReorderInput<T>) {\n  const dragStateRef = useRef<PillDragState>({ draggedIndex: null, currentDropTarget: null });\n  const pendingFocusRef = useRef<PendingFocus<T> | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const valueRef = useRef(value);\n  valueRef.current = value;\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) {\n      return;\n    }\n    pendingFocusRef.current = null;\n    if (!valuesMatch(valueRef.current, pending.expectedValue)) {\n      return;\n    }\n    pending.container\n      ?.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${pending.index}\"]`)\n      ?.focus();\n  });\n\n  const setContainer = useCallback((node: HTMLDivElement | null) => {\n    containerRef.current = node;\n  }, []);\n\n  const getListProps = (): PillsReorderListProps => {\n    if (!enabled) {\n      return {};\n    }\n    return { ref: setContainer };\n  };\n\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!enabled || event.key !== 'ArrowLeft') {\n      return;\n    }\n\n    const input = event.currentTarget;\n    const caretAtStart =\n      input.value.length === 0 || (input.selectionStart === 0 && input.selectionEnd === 0);\n    if (!caretAtStart) {\n      return;\n    }\n\n    const container = containerRef.current;\n    if (!container) {\n      return;\n    }\n\n    const pills = container.querySelectorAll<HTMLElement>('[data-mantine-pill-index]');\n    if (pills.length === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    pills[pills.length - 1].focus();\n  };\n\n  const getPillProps = (index: number): PillReorderProps | undefined => {\n    if (!enabled) {\n      return undefined;\n    }\n\n    return {\n      draggable: true,\n      tabIndex: -1,\n      'data-mantine-pill-index': index,\n      'aria-keyshortcuts': 'Alt+ArrowLeft Alt+ArrowRight',\n      onMouseDown: (event) => {\n        if (event.button === 0) {\n          event.stopPropagation();\n        }\n      },\n      onDragStart: (event) => {\n        event.stopPropagation();\n        event.dataTransfer.effectAllowed = 'move';\n        event.dataTransfer.setData('text/plain', String(index));\n        dragStateRef.current.draggedIndex = index;\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const ghost = target.cloneNode(true) as HTMLElement;\n        ghost.removeAttribute('data-dragging');\n        ghost.removeAttribute('data-drag-over');\n        ghost.style.position = 'fixed';\n        ghost.style.top = '-9999px';\n        ghost.style.left = '-9999px';\n        ghost.style.width = `${rect.width}px`;\n        ghost.style.height = `${rect.height}px`;\n        ghost.style.pointerEvents = 'none';\n        document.body.appendChild(ghost);\n        event.dataTransfer.setDragImage(ghost, event.clientX - rect.left, event.clientY - rect.top);\n\n        setTimeout(() => ghost.parentNode?.removeChild(ghost), 0);\n\n        requestAnimationFrame(() => {\n          target.setAttribute('data-dragging', 'true');\n        });\n      },\n      onDragOver: (event) => {\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex === null || draggedIndex === index) {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const rect = target.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const isStart = isRtl ? x > rect.width / 2 : x < rect.width / 2;\n        const position: PillReorderPosition = isStart ? 'before' : 'after';\n\n        event.preventDefault();\n        event.stopPropagation();\n        event.dataTransfer.dropEffect = 'move';\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget && prevTarget !== target) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        target.setAttribute('data-drag-over', position);\n        dragStateRef.current.currentDropTarget = target;\n      },\n      onDragLeave: (event) => {\n        const target = event.currentTarget;\n        const related = event.relatedTarget as Node | null;\n        if (related && target.contains(related)) {\n          return;\n        }\n\n        target.removeAttribute('data-drag-over');\n        if (dragStateRef.current.currentDropTarget === target) {\n          dragStateRef.current.currentDropTarget = null;\n        }\n      },\n      onDrop: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const target = event.currentTarget;\n        const position = target.getAttribute('data-drag-over') as PillReorderPosition | null;\n        target.removeAttribute('data-drag-over');\n\n        const { draggedIndex } = dragStateRef.current;\n        if (draggedIndex !== null && position && draggedIndex !== index) {\n          const nextValue = movePill(valueRef.current, draggedIndex, index, position);\n          if (nextValue !== valueRef.current) {\n            onChange(nextValue);\n          }\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onDragEnd: (event) => {\n        const target = event.currentTarget;\n        target.removeAttribute('data-dragging');\n\n        const prevTarget = dragStateRef.current.currentDropTarget;\n        if (prevTarget) {\n          prevTarget.removeAttribute('data-drag-over');\n        }\n\n        dragStateRef.current.draggedIndex = null;\n        dragStateRef.current.currentDropTarget = null;\n      },\n      onKeyDown: (event) => {\n        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n          return;\n        }\n\n        const target = event.currentTarget;\n        const isRtl = getComputedStyle(target).direction === 'rtl';\n        const movingForward = isRtl ? event.key === 'ArrowLeft' : event.key === 'ArrowRight';\n        const targetIndex = movingForward ? index + 1 : index - 1;\n\n        if (event.altKey) {\n          if (targetIndex < 0 || targetIndex >= valueRef.current.length) {\n            return;\n          }\n\n          event.preventDefault();\n          event.stopPropagation();\n\n          const position: PillReorderPosition = movingForward ? 'after' : 'before';\n          const nextValue = movePill(valueRef.current, index, targetIndex, position);\n          if (nextValue === valueRef.current) {\n            return;\n          }\n\n          pendingFocusRef.current = {\n            container: target.parentElement,\n            index: targetIndex,\n            expectedValue: nextValue,\n          };\n          onChange(nextValue);\n          return;\n        }\n\n        if (targetIndex < 0) {\n          return;\n        }\n\n        const container = target.parentElement;\n        if (!container) {\n          return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (targetIndex >= valueRef.current.length) {\n          findSearchInput(container)?.focus();\n          return;\n        }\n\n        container.querySelector<HTMLElement>(`[data-mantine-pill-index=\"${targetIndex}\"]`)?.focus();\n      },\n    };\n  };\n\n  return { getPillProps, getListProps, handleInputKeyDown };\n}\n"],"mappings":"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"}

package/cjs/components/FileInput/FileInput.cjs

@@ -24,7 +24,11 @@ const defaultProps = {
 	size: "sm"
 };
 const FileInput = require_factory.genericFactory((_props) => {
-	const props = require_use_props.useProps("FileInput", defaultProps, _props);
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"FileInput"
+	], defaultProps, _props);
 	const { unstyled, vars, onChange, value, defaultValue, multiple, accept, name, form, valueComponent: ValueComponent, clearable, clearSectionMode, clearButtonProps, readOnly, capture, fileInputProps, rightSection, size, placeholder, component, resetRef: resetRefProp, classNames, styles, attributes, ...others } = props;
 	const resetRef = (0, react.useRef)(null);
 	const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({

package/cjs/components/FileInput/FileInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.cjs","names":["genericFactory","useProps","useResolvedStylesApi","CloseButton","FileButton","InputBase","Input"],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  Input,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<FileInputFactory>,\n    ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {\n  component?: any;\n\n  /** Called when value changes */\n  onChange?: (payload: Multiple extends true ? File[] : File | null) => void;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? File[] : File | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Multiple extends true ? File[] : File | null;\n\n  /** If set, user can pick more than one file @default false */\n  multiple?: Multiple;\n\n  /** File input accept attribute, for example, `\"image/png,image/jpeg\"` */\n  accept?: string;\n\n  /** Input name attribute */\n  name?: string;\n\n  /** Input form attribute */\n  form?: string;\n\n  /** Value renderer. By default, displays file name. */\n  valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n  /** If set, the clear button is displayed in the right section @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: React.ComponentProps<'button'>;\n\n  /** If set, the input value cannot be changed  */\n  readOnly?: boolean;\n\n  /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */\n  capture?: boolean | 'user' | 'environment';\n\n  /** Props passed down to the hidden `input[type=\"file\"]` */\n  fileInputProps?: React.ComponentProps<'input'>;\n\n  /** Input placeholder */\n  placeholder?: React.ReactNode;\n\n  /** Reference of the function that should be called when value changes to null or empty array */\n  resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n  props: FileInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: __InputStylesNames | 'placeholder';\n  variant: InputVariant;\n  signature: <Multiple extends boolean = false>(\n    props: FileInputProps<Multiple>\n  ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n    {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n  </div>\n);\n\nconst defaultProps = {\n  valueComponent: DefaultValue,\n  size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n  const props = useProps('FileInput', defaultProps, _props);\n  const {\n    unstyled,\n    vars,\n    onChange,\n    value,\n    defaultValue,\n    multiple,\n    accept,\n    name,\n    form,\n    valueComponent: ValueComponent,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    readOnly,\n    capture,\n    fileInputProps,\n    rightSection,\n    size,\n    placeholder,\n    component,\n    resetRef: resetRefProp,\n    classNames,\n    styles,\n    attributes,\n    ...others\n  } = props;\n\n  const resetRef = useRef<() => void>(null);\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [_value, setValue] = useUncontrolled<null | File | File[]>({\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    finalValue: multiple ? [] : null,\n  });\n\n  const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n  const clearButton = (\n    <CloseButton\n      {...clearButtonProps}\n      variant=\"subtle\"\n      onClick={() => setValue(multiple ? [] : null)}\n      size={size}\n      unstyled={unstyled}\n    />\n  );\n\n  const _clearable = clearable && hasValue && !readOnly;\n\n  useEffect(() => {\n    if ((Array.isArray(_value) && _value.length === 0) || _value === null) {\n      resetRef.current?.();\n    }\n  }, [_value]);\n\n  return (\n    <FileButton\n      onChange={setValue}\n      multiple={multiple}\n      accept={accept}\n      name={name}\n      form={form}\n      resetRef={useMergedRef(resetRef, resetRefProp)}\n      disabled={readOnly}\n      capture={capture}\n      inputProps={fileInputProps}\n    >\n      {(fileButtonProps) => (\n        <InputBase\n          component={component || 'button'}\n          rightSection={rightSection}\n          __clearSection={clearButton}\n          __clearable={_clearable}\n          __clearSectionMode={clearSectionMode}\n          {...fileButtonProps}\n          {...others}\n          __staticSelector=\"FileInput\"\n          multiline\n          type=\"button\"\n          pointer\n          __stylesApiProps={props}\n          unstyled={unstyled}\n          size={size}\n          classNames={classNames}\n          styles={styles}\n          attributes={attributes}\n        >\n          {!hasValue ? (\n            <Input.Placeholder\n              __staticSelector=\"FileInput\"\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              attributes={attributes}\n            >\n              {placeholder}\n            </Input.Placeholder>\n          ) : (\n            <ValueComponent value={_value} />\n          )}\n        </InputBase>\n      )}\n    </FileButton>\n  );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n\nexport namespace FileInput {\n  export type Props<Multiple extends boolean = false> = FileInputProps<Multiple>;\n  export type Factory = FileInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAYA,gBAAAA,gBAAkC,WAAW;CACpE,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAA,GAAA,MAAA,QAA8B,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAAkD;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,WAAA,GAAA,eAAA,cAAuB,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,iBAAA,GAAA,kBAAA,KAACC,cAAAA,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAUD,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"FileInput.cjs","names":["genericFactory","useProps","useResolvedStylesApi","CloseButton","FileButton","InputBase","Input"],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  ElementProps,\n  Factory,\n  genericFactory,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  ClearSectionMode,\n  Input,\n  InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<FileInputFactory>,\n    ElementProps<'button', 'value' | 'defaultValue' | 'onChange' | 'placeholder'> {\n  component?: any;\n\n  /** Called when value changes */\n  onChange?: (payload: Multiple extends true ? File[] : File | null) => void;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? File[] : File | null;\n\n  /** Uncontrolled component default value */\n  defaultValue?: Multiple extends true ? File[] : File | null;\n\n  /** If set, user can pick more than one file @default false */\n  multiple?: Multiple;\n\n  /** File input accept attribute, for example, `\"image/png,image/jpeg\"` */\n  accept?: string;\n\n  /** Input name attribute */\n  name?: string;\n\n  /** Input form attribute */\n  form?: string;\n\n  /** Value renderer. By default, displays file name. */\n  valueComponent?: React.FC<{ value: null | File | File[] }>;\n\n  /** If set, the clear button is displayed in the right section @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** Props passed down to the clear button */\n  clearButtonProps?: React.ComponentProps<'button'>;\n\n  /** If set, the input value cannot be changed  */\n  readOnly?: boolean;\n\n  /** Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. */\n  capture?: boolean | 'user' | 'environment';\n\n  /** Props passed down to the hidden `input[type=\"file\"]` */\n  fileInputProps?: React.ComponentProps<'input'>;\n\n  /** Input placeholder */\n  placeholder?: React.ReactNode;\n\n  /** Reference of the function that should be called when value changes to null or empty array */\n  resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n  props: FileInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: __InputStylesNames | 'placeholder';\n  variant: InputVariant;\n  signature: <Multiple extends boolean = false>(\n    props: FileInputProps<Multiple>\n  ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n    {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n  </div>\n);\n\nconst defaultProps = {\n  valueComponent: DefaultValue,\n  size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n  const props = useProps(['Input', 'InputWrapper', 'FileInput'], defaultProps, _props);\n  const {\n    unstyled,\n    vars,\n    onChange,\n    value,\n    defaultValue,\n    multiple,\n    accept,\n    name,\n    form,\n    valueComponent: ValueComponent,\n    clearable,\n    clearSectionMode,\n    clearButtonProps,\n    readOnly,\n    capture,\n    fileInputProps,\n    rightSection,\n    size,\n    placeholder,\n    component,\n    resetRef: resetRefProp,\n    classNames,\n    styles,\n    attributes,\n    ...others\n  } = props;\n\n  const resetRef = useRef<() => void>(null);\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [_value, setValue] = useUncontrolled<null | File | File[]>({\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    finalValue: multiple ? [] : null,\n  });\n\n  const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n  const clearButton = (\n    <CloseButton\n      {...clearButtonProps}\n      variant=\"subtle\"\n      onClick={() => setValue(multiple ? [] : null)}\n      size={size}\n      unstyled={unstyled}\n    />\n  );\n\n  const _clearable = clearable && hasValue && !readOnly;\n\n  useEffect(() => {\n    if ((Array.isArray(_value) && _value.length === 0) || _value === null) {\n      resetRef.current?.();\n    }\n  }, [_value]);\n\n  return (\n    <FileButton\n      onChange={setValue}\n      multiple={multiple}\n      accept={accept}\n      name={name}\n      form={form}\n      resetRef={useMergedRef(resetRef, resetRefProp)}\n      disabled={readOnly}\n      capture={capture}\n      inputProps={fileInputProps}\n    >\n      {(fileButtonProps) => (\n        <InputBase\n          component={component || 'button'}\n          rightSection={rightSection}\n          __clearSection={clearButton}\n          __clearable={_clearable}\n          __clearSectionMode={clearSectionMode}\n          {...fileButtonProps}\n          {...others}\n          __staticSelector=\"FileInput\"\n          multiline\n          type=\"button\"\n          pointer\n          __stylesApiProps={props}\n          unstyled={unstyled}\n          size={size}\n          classNames={classNames}\n          styles={styles}\n          attributes={attributes}\n        >\n          {!hasValue ? (\n            <Input.Placeholder\n              __staticSelector=\"FileInput\"\n              classNames={resolvedClassNames}\n              styles={resolvedStyles}\n              attributes={attributes}\n            >\n              {placeholder}\n            </Input.Placeholder>\n          ) : (\n            <ValueComponent value={_value} />\n          )}\n        </InputBase>\n      )}\n    </FileButton>\n  );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n\nexport namespace FileInput {\n  export type Props<Multiple extends boolean = false> = FileInputProps<Multiple>;\n  export type Factory = FileInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAYA,gBAAAA,gBAAkC,WAAW;CACpE,MAAM,QAAQC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,OAAO;CACpF,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAA,GAAA,MAAA,QAA8B,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmBC,gCAAAA,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAAkD;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,WAAA,GAAA,eAAA,cAAuB,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,iBAAA,GAAA,kBAAA,KAACC,cAAAA,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAUD,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/Highlight/highlighter/highlighter.cjs

@@ -1,7 +1,7 @@
 "use client";
 //#region packages/@mantine/core/src/components/Highlight/highlighter/highlighter.ts
 function escapeRegex(value) {
-	return value.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&");
+	return value.replace(/[\\^$.*+?()[\]{}|]/g, "\\$&");
 }
 function highlighter(value, _highlight, options = {}) {
 	if (_highlight == null) return [{
@@ -14,8 +14,8 @@ function highlighter(value, _highlight, options = {}) {
 		highlighted: false
 	}];
 	const matcher = typeof highlight === "string" ? highlight.trim() : highlight.filter((part) => part.trim().length !== 0).map((part) => part.trim()).sort((a, b) => b.length - a.length).join("|");
-	const pattern = options.wholeWord ? `\\b(${matcher})\\b` : `(${matcher})`;
-	const re = new RegExp(pattern, "gi");
+	const pattern = options.wholeWord ? `(?<![\\p{L}\\p{N}_])(${matcher})(?![\\p{L}\\p{N}_])` : `(${matcher})`;
+	const re = new RegExp(pattern, options.wholeWord ? "giu" : "gi");
 	return value.split(re).map((part, index) => ({
 		chunk: part,
 		highlighted: index % 2 === 1

package/cjs/components/Highlight/highlighter/highlighter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"highlighter.cjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n  return value.replace(/[-[\\]{}()*+?.,\\\\^$|#]/g, '\\\\$&');\n}\n\nexport interface HighlightChunk {\n  chunk: string;\n  highlighted: boolean;\n  color?: string;\n}\n\nexport interface HighlighterOptions {\n  wholeWord?: boolean;\n}\n\nexport function highlighter(\n  value: string,\n  _highlight: string | string[],\n  options: HighlighterOptions = {}\n): HighlightChunk[] {\n  if (_highlight == null) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const highlight = Array.isArray(_highlight)\n    ? _highlight.map(escapeRegex)\n    : escapeRegex(_highlight);\n\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .sort((a, b) => b.length - a.length)\n          .join('|');\n\n  const pattern = options.wholeWord ? `\\\\b(${matcher})\\\\b` : `(${matcher})`;\n  const re = new RegExp(pattern, 'gi');\n  const chunks = value\n    .split(re)\n    .map((part, index) => ({ chunk: part, highlighted: index % 2 === 1 }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n"],"mappings":";;AAAA,SAAS,YAAY,OAAe;AAClC,QAAO,MAAM,QAAQ,0BAA0B,OAAO;;AAaxD,SAAgB,YACd,OACA,YACA,UAA8B,EAAE,EACd;AAClB,KAAI,cAAc,KAChB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,YAAY,MAAM,QAAQ,WAAW,GACvC,WAAW,IAAI,YAAY,GAC3B,YAAY,WAAW;AAM3B,KAAI,EAJoB,MAAM,QAAQ,UAAU,GAC5C,UAAU,QAAQ,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,IAC5D,UAAU,MAAM,KAAK,IAGvB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,UACJ,OAAO,cAAc,WACjB,UAAU,MAAM,GAChB,UACG,QAAQ,SAAS,KAAK,MAAM,CAAC,WAAW,EAAE,CAC1C,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CACnC,KAAK,IAAI;CAElB,MAAM,UAAU,QAAQ,YAAY,OAAO,QAAQ,QAAQ,IAAI,QAAQ;CACvE,MAAM,KAAK,IAAI,OAAO,SAAS,KAAK;AAMpC,QALe,MACZ,MAAM,GAAG,CACT,KAAK,MAAM,WAAW;EAAE,OAAO;EAAM,aAAa,QAAQ,MAAM;EAAG,EAAE,CACrE,QAAQ,EAAE,YAAY,MAAM"}
+{"version":3,"file":"highlighter.cjs","names":[],"sources":["../../../../src/components/Highlight/highlighter/highlighter.ts"],"sourcesContent":["function escapeRegex(value: string) {\n  return value.replace(/[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&');\n}\n\nexport interface HighlightChunk {\n  chunk: string;\n  highlighted: boolean;\n  color?: string;\n}\n\nexport interface HighlighterOptions {\n  wholeWord?: boolean;\n}\n\nexport function highlighter(\n  value: string,\n  _highlight: string | string[],\n  options: HighlighterOptions = {}\n): HighlightChunk[] {\n  if (_highlight == null) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const highlight = Array.isArray(_highlight)\n    ? _highlight.map(escapeRegex)\n    : escapeRegex(_highlight);\n\n  const shouldHighlight = Array.isArray(highlight)\n    ? highlight.filter((part) => part.trim().length > 0).length > 0\n    : highlight.trim() !== '';\n\n  if (!shouldHighlight) {\n    return [{ chunk: value, highlighted: false }];\n  }\n\n  const matcher =\n    typeof highlight === 'string'\n      ? highlight.trim()\n      : highlight\n          .filter((part) => part.trim().length !== 0)\n          .map((part) => part.trim())\n          .sort((a, b) => b.length - a.length)\n          .join('|');\n\n  const pattern = options.wholeWord\n    ? `(?<![\\\\p{L}\\\\p{N}_])(${matcher})(?![\\\\p{L}\\\\p{N}_])`\n    : `(${matcher})`;\n  const re = new RegExp(pattern, options.wholeWord ? 'giu' : 'gi');\n  const chunks = value\n    .split(re)\n    .map((part, index) => ({ chunk: part, highlighted: index % 2 === 1 }))\n    .filter(({ chunk }) => chunk);\n\n  return chunks;\n}\n"],"mappings":";;AAAA,SAAS,YAAY,OAAe;AAClC,QAAO,MAAM,QAAQ,uBAAuB,OAAO;;AAarD,SAAgB,YACd,OACA,YACA,UAA8B,EAAE,EACd;AAClB,KAAI,cAAc,KAChB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,YAAY,MAAM,QAAQ,WAAW,GACvC,WAAW,IAAI,YAAY,GAC3B,YAAY,WAAW;AAM3B,KAAI,EAJoB,MAAM,QAAQ,UAAU,GAC5C,UAAU,QAAQ,SAAS,KAAK,MAAM,CAAC,SAAS,EAAE,CAAC,SAAS,IAC5D,UAAU,MAAM,KAAK,IAGvB,QAAO,CAAC;EAAE,OAAO;EAAO,aAAa;EAAO,CAAC;CAG/C,MAAM,UACJ,OAAO,cAAc,WACjB,UAAU,MAAM,GAChB,UACG,QAAQ,SAAS,KAAK,MAAM,CAAC,WAAW,EAAE,CAC1C,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,OAAO,CACnC,KAAK,IAAI;CAElB,MAAM,UAAU,QAAQ,YACpB,wBAAwB,QAAQ,wBAChC,IAAI,QAAQ;CAChB,MAAM,KAAK,IAAI,OAAO,SAAS,QAAQ,YAAY,QAAQ,KAAK;AAMhE,QALe,MACZ,MAAM,GAAG,CACT,KAAK,MAAM,WAAW;EAAE,OAAO;EAAM,aAAa,QAAQ,MAAM;EAAG,EAAE,CACrE,QAAQ,EAAE,YAAY,MAAM"}

package/cjs/components/Input/use-input-props.cjs

@@ -3,7 +3,11 @@ const require_use_props = require("../../core/MantineProvider/use-props/use-prop
 const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
 //#region packages/@mantine/core/src/components/Input/use-input-props.ts
 function useInputProps(component, defaultProps, _props) {
-	const props = require_use_props.useProps(component, defaultProps, _props);
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		component
+	], defaultProps, _props);
 	const { label, description, error, required, classNames, styles, className, unstyled, __staticSelector, __stylesApiProps, errorProps, labelProps, descriptionProps, wrapperProps: _wrapperProps, id, size, style, inputContainer, inputWrapperOrder, withAsterisk, variant, vars, mod, attributes, ...others } = props;
 	const { styleProps, rest } = require_extract_style_props.extractStyleProps(others);
 	const wrapperProps = {

package/cjs/components/Input/use-input-props.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-input-props.cjs","names":["useProps","extractStyleProps"],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(component, defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQA,kBAAAA,SAAe,WAAW,cAAc,OAAO;CAC7D,MAAM,EACJ,OACA,aACA,OACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CAEtD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;GAAY;EAChD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;GACD;EACF"}
+{"version":3,"file":"use-input-props.cjs","names":["useProps","extractStyleProps"],"sources":["../../../src/components/Input/use-input-props.ts"],"sourcesContent":["import { BoxProps, extractStyleProps, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps } from './Input';\n\ninterface BaseProps\n  extends __BaseInputProps, BoxProps, StylesApiProps<{ props: any; stylesNames: string }> {\n  __staticSelector?: string;\n  __stylesApiProps?: Record<string, any>;\n  id?: string;\n}\n\nexport function useInputProps<T extends BaseProps, U extends Partial<T> | null>(\n  component: string,\n  defaultProps: U,\n  _props: T\n) {\n  const props = useProps<T, U>(['Input', 'InputWrapper', component], defaultProps, _props);\n  const {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    styles,\n    className,\n    unstyled,\n    __staticSelector,\n    __stylesApiProps,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    wrapperProps: _wrapperProps,\n    id,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    vars,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const { styleProps, rest } = extractStyleProps(others);\n\n  const wrapperProps = {\n    label,\n    description,\n    error,\n    required,\n    classNames,\n    className,\n    __staticSelector,\n    __stylesApiProps: __stylesApiProps || props,\n    errorProps,\n    labelProps,\n    descriptionProps,\n    unstyled,\n    styles,\n    size,\n    style,\n    inputContainer,\n    inputWrapperOrder,\n    withAsterisk,\n    variant,\n    id,\n    mod,\n    attributes,\n    ..._wrapperProps,\n  };\n\n  return {\n    ...rest,\n    classNames,\n    styles,\n    unstyled,\n    wrapperProps: { ...wrapperProps, ...styleProps } as typeof wrapperProps & BoxProps,\n    inputProps: {\n      required,\n      classNames,\n      styles,\n      unstyled,\n      size,\n      __staticSelector,\n      __stylesApiProps: __stylesApiProps || props,\n      error,\n      variant,\n      id,\n      attributes,\n    },\n  };\n}\n"],"mappings":";;;;AAUA,SAAgB,cACd,WACA,cACA,QACA;CACA,MAAM,QAAQA,kBAAAA,SAAe;EAAC;EAAS;EAAgB;EAAU,EAAE,cAAc,OAAO;CACxF,MAAM,EACJ,OACA,aACA,OACA,UACA,YACA,QACA,WACA,UACA,kBACA,kBACA,YACA,YACA,kBACA,cAAc,eACd,IACA,MACA,OACA,gBACA,mBACA,cACA,SACA,MACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAASC,4BAAAA,kBAAkB,OAAO;CAEtD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,oBAAoB;EACtC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;EACJ;AAED,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA,cAAc;GAAE,GAAG;GAAc,GAAG;GAAY;EAChD,YAAY;GACV;GACA;GACA;GACA;GACA;GACA;GACA,kBAAkB,oBAAoB;GACtC;GACA;GACA;GACA;GACD;EACF"}

package/cjs/components/JsonInput/JsonInput.cjs

@@ -12,11 +12,14 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const defaultProps = {
 	serialize: JSON.stringify,
 	deserialize: JSON.parse,
-	size: "sm",
 	indentSpaces: 2
 };
 const JsonInput = require_factory.factory((props) => {
-	const { value, defaultValue, onChange, formatOnBlur, validationError, serialize, deserialize, onFocus, onBlur, readOnly, error, indentSpaces, ...others } = require_use_props.useProps("JsonInput", defaultProps, props);
+	const { value, defaultValue, onChange, formatOnBlur, validationError, serialize, deserialize, onFocus, onBlur, readOnly, error, indentSpaces, ...others } = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"JsonInput"
+	], defaultProps, props);
 	const [_value, setValue] = (0, _mantine_hooks.useUncontrolled)({
 		value,
 		defaultValue,

package/cjs/components/JsonInput/JsonInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"JsonInput.cjs","names":["factory","useProps","validateJson","Textarea","InputBase"],"sources":["../../../src/components/JsonInput/JsonInput.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { factory, Factory, useProps } from '../../core';\nimport { __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Textarea, TextareaProps } from '../Textarea';\nimport { validateJson } from './validate-json/validate-json';\n\nexport interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the value should be formatted on blur @default false */\n  formatOnBlur?: boolean;\n\n  /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */\n  validationError?: React.ReactNode;\n\n  /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */\n  serialize?: typeof JSON.stringify;\n\n  /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */\n  deserialize?: typeof JSON.parse;\n\n  /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */\n  indentSpaces?: number;\n}\n\nexport type JsonInputFactory = Factory<{\n  props: JsonInputProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n  serialize: JSON.stringify,\n  deserialize: JSON.parse,\n  size: 'sm',\n  indentSpaces: 2,\n} satisfies Partial<JsonInputProps>;\n\nexport const JsonInput = factory<JsonInputFactory>((props) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    formatOnBlur,\n    validationError,\n    serialize,\n    deserialize,\n    onFocus,\n    onBlur,\n    readOnly,\n    error,\n    indentSpaces,\n    ...others\n  } = useProps('JsonInput', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const [valid, setValid] = useState(validateJson(_value, deserialize));\n\n  const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onFocus?.(event);\n    setValid(true);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onBlur?.(event);\n    const isValid = validateJson(event.currentTarget.value, deserialize);\n    formatOnBlur &&\n      !readOnly &&\n      isValid &&\n      event.currentTarget.value.trim() !== '' &&\n      setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));\n    setValid(isValid);\n  };\n\n  return (\n    <Textarea\n      value={_value}\n      onChange={(event) => setValue(event.currentTarget.value)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      readOnly={readOnly}\n      {...others}\n      autoComplete=\"off\"\n      __staticSelector=\"JsonInput\"\n      error={valid ? error : validationError || true}\n      data-monospace\n    />\n  );\n});\n\nJsonInput.classes = InputBase.classes;\nJsonInput.displayName = '@mantine/core/JsonInput';\n\nexport namespace JsonInput {\n  export type Props = JsonInputProps;\n  export type Factory = JsonInputFactory;\n}\n"],"mappings":";;;;;;;;;;;AAwCA,MAAM,eAAe;CACnB,WAAW,KAAK;CAChB,aAAa,KAAK;CAClB,MAAM;CACN,cAAc;CACf;AAED,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAC5D,MAAM,EACJ,OACA,cACA,UACA,cACA,iBACA,WACA,aACA,SACA,QACA,UACA,OACA,cACA,GAAG,WACDC,kBAAAA,SAAS,aAAa,cAAc,MAAM;CAE9C,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqBC,sBAAAA,aAAa,QAAQ,YAAY,CAAC;CAErE,MAAM,eAAe,UAAiD;AACpE,YAAU,MAAM;AAChB,WAAS,KAAK;;CAGhB,MAAM,cAAc,UAAiD;AACnE,WAAS,MAAM;EACf,MAAM,UAAUA,sBAAAA,aAAa,MAAM,cAAc,OAAO,YAAY;AACpE,kBACE,CAAC,YACD,WACA,MAAM,cAAc,MAAM,MAAM,KAAK,MACrC,SAAS,UAAU,YAAY,MAAM,cAAc,MAAM,EAAE,MAAM,aAAa,CAAC;AACjF,WAAS,QAAQ;;AAGnB,QACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,OAAO;EACP,WAAW,UAAU,SAAS,MAAM,cAAc,MAAM;EACxD,SAAS;EACT,QAAQ;EACE;EACV,GAAI;EACJ,cAAa;EACb,kBAAiB;EACjB,OAAO,QAAQ,QAAQ,mBAAmB;EAC1C,kBAAA;EACA,CAAA;EAEJ;AAEF,UAAU,UAAUC,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"JsonInput.cjs","names":["factory","useProps","validateJson","Textarea","InputBase"],"sources":["../../../src/components/JsonInput/JsonInput.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { factory, Factory, useProps } from '../../core';\nimport { __InputStylesNames } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Textarea, TextareaProps } from '../Textarea';\nimport { validateJson } from './validate-json/validate-json';\n\nexport interface JsonInputProps extends Omit<TextareaProps, 'onChange'> {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the value should be formatted on blur @default false */\n  formatOnBlur?: boolean;\n\n  /** Error message shown when the input value is invalid JSON (checked on blur). If not provided, a generic error state is shown. Takes precedence over the `error` prop when validation fails. */\n  validationError?: React.ReactNode;\n\n  /** Function to serialize value into a string for formatting. Called with (value, null, 2) where 2 is the indentation level. @default JSON.stringify */\n  serialize?: typeof JSON.stringify;\n\n  /** Function to deserialize string value for formatting and validation. Must throw an error if the string is invalid JSON. @default JSON.parse */\n  deserialize?: typeof JSON.parse;\n\n  /** Number of spaces to use as white space for formatting. Passed as the third argument to `serialize` function. @default 2 */\n  indentSpaces?: number;\n}\n\nexport type JsonInputFactory = Factory<{\n  props: JsonInputProps;\n  ref: HTMLTextAreaElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {\n  serialize: JSON.stringify,\n  deserialize: JSON.parse,\n  indentSpaces: 2,\n} satisfies Partial<JsonInputProps>;\n\nexport const JsonInput = factory<JsonInputFactory>((props) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    formatOnBlur,\n    validationError,\n    serialize,\n    deserialize,\n    onFocus,\n    onBlur,\n    readOnly,\n    error,\n    indentSpaces,\n    ...others\n  } = useProps(['Input', 'InputWrapper', 'JsonInput'], defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: '',\n    onChange,\n  });\n\n  const [valid, setValid] = useState(validateJson(_value, deserialize));\n\n  const handleFocus = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onFocus?.(event);\n    setValid(true);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n    onBlur?.(event);\n    const isValid = validateJson(event.currentTarget.value, deserialize);\n    formatOnBlur &&\n      !readOnly &&\n      isValid &&\n      event.currentTarget.value.trim() !== '' &&\n      setValue(serialize(deserialize(event.currentTarget.value), null, indentSpaces));\n    setValid(isValid);\n  };\n\n  return (\n    <Textarea\n      value={_value}\n      onChange={(event) => setValue(event.currentTarget.value)}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      readOnly={readOnly}\n      {...others}\n      autoComplete=\"off\"\n      __staticSelector=\"JsonInput\"\n      error={valid ? error : validationError || true}\n      data-monospace\n    />\n  );\n});\n\nJsonInput.classes = InputBase.classes;\nJsonInput.displayName = '@mantine/core/JsonInput';\n\nexport namespace JsonInput {\n  export type Props = JsonInputProps;\n  export type Factory = JsonInputFactory;\n}\n"],"mappings":";;;;;;;;;;;AAwCA,MAAM,eAAe;CACnB,WAAW,KAAK;CAChB,aAAa,KAAK;CAClB,cAAc;CACf;AAED,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAC5D,MAAM,EACJ,OACA,cACA,UACA,cACA,iBACA,WACA,aACA,SACA,QACA,UACA,OACA,cACA,GAAG,WACDC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,MAAM;CAEzE,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqBC,sBAAAA,aAAa,QAAQ,YAAY,CAAC;CAErE,MAAM,eAAe,UAAiD;AACpE,YAAU,MAAM;AAChB,WAAS,KAAK;;CAGhB,MAAM,cAAc,UAAiD;AACnE,WAAS,MAAM;EACf,MAAM,UAAUA,sBAAAA,aAAa,MAAM,cAAc,OAAO,YAAY;AACpE,kBACE,CAAC,YACD,WACA,MAAM,cAAc,MAAM,MAAM,KAAK,MACrC,SAAS,UAAU,YAAY,MAAM,cAAc,MAAM,EAAE,MAAM,aAAa,CAAC;AACjF,WAAS,QAAQ;;AAGnB,QACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,OAAO;EACP,WAAW,UAAU,SAAS,MAAM,cAAc,MAAM;EACxD,SAAS;EACT,QAAQ;EACE;EACV,GAAI;EACJ,cAAa;EACb,kBAAiB;EACjB,OAAO,QAAQ,QAAQ,mBAAmB;EAC1C,kBAAA;EACA,CAAA;EAEJ;AAEF,UAAU,UAAUC,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/MaskInput/MaskInput.cjs

@@ -8,7 +8,11 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/MaskInput/MaskInput.tsx
 const defaultProps = {};
 const MaskInput = require_factory.factory((props) => {
-	const { maskRef, elementProps } = require_use_mask_input_props.useMaskInputProps(require_use_props.useProps("MaskInput", defaultProps, props));
+	const { maskRef, elementProps } = require_use_mask_input_props.useMaskInputProps(require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"MaskInput"
+	], defaultProps, props));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
 		component: "input",
 		ref: maskRef,

package/cjs/components/MaskInput/MaskInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MaskInput.cjs","names":["factory","useMaskInputProps","useProps","InputBase"],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps('MaskInput', defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;;AA6DA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiBC,6BAAAA,kBADnBC,kBAAAA,SAAS,aAAa,cAAc,MAAM,CACE;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAUA,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}
+{"version":3,"file":"MaskInput.cjs","names":["factory","useMaskInputProps","useProps","InputBase"],"sources":["../../../src/components/MaskInput/MaskInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { useMaskInputProps } from './use-mask-input-props';\n\nexport interface MaskInputProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<MaskInputFactory>,\n    ElementProps<'input', 'size'> {\n  /** Mask pattern string or array of string literals and RegExp objects */\n  mask: string | Array<string | RegExp>;\n\n  /** Override or extend the default token map */\n  tokens?: Record<string, RegExp>;\n\n  /** Called before masking on each keystroke, can return overrides for mask options */\n  modify?: (\n    value: string\n  ) => Partial<Pick<MaskInputProps, 'mask' | 'tokens' | 'slotChar' | 'separate'>> | undefined;\n\n  /** When true, raw and display values are decoupled */\n  separate?: boolean;\n\n  /** Character displayed in unfilled slots, `\"_\"` by default */\n  slotChar?: string | null;\n\n  /** Show mask pattern even when field is empty and unfocused */\n  alwaysShowMask?: boolean;\n\n  /** Show mask placeholder on focus, `true` by default */\n  showMaskOnFocus?: boolean;\n\n  /** Transform each character before validation and insertion */\n  transform?: (char: string) => string;\n\n  /** Clear value on blur when mask is incomplete, `false` by default */\n  autoClear?: boolean;\n\n  /** Called on every change with raw and masked values */\n  onChangeRaw?: (rawValue: string, maskedValue: string) => void;\n\n  /** Called when all required mask slots are filled */\n  onComplete?: (maskedValue: string, rawValue: string) => void;\n\n  /** Escape hatch for advanced cursor/value manipulation */\n  beforeMaskedStateChange?: (states: {\n    previousState: { value: string; selection: { start: number; end: number } | null };\n    currentState: { value: string; selection: { start: number; end: number } | null };\n    nextState: { value: string; selection: { start: number; end: number } | null };\n  }) => { value: string; selection: { start: number; end: number } | null };\n\n  /** Assigns a function that clears the input value to the given ref */\n  resetRef?: React.RefObject<(() => void) | null>;\n}\n\nexport type MaskInputFactory = Factory<{\n  props: MaskInputProps;\n  variant: InputVariant;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps = {} satisfies Partial<MaskInputProps>;\n\nexport const MaskInput = factory<MaskInputFactory>((props) => {\n  const _props = useProps(['Input', 'InputWrapper', 'MaskInput'], defaultProps, props);\n  const { maskRef, elementProps } = useMaskInputProps(_props);\n\n  return (\n    <InputBase\n      component=\"input\"\n      ref={maskRef}\n      {...(elementProps as any)}\n      __staticSelector=\"MaskInput\"\n    />\n  );\n});\n\nMaskInput.classes = InputBase.classes;\nMaskInput.displayName = '@mantine/core/MaskInput';\n"],"mappings":";;;;;;;;AAgEA,MAAM,eAAe,EAAE;AAEvB,MAAa,YAAYA,gBAAAA,SAA2B,UAAU;CAE5D,MAAM,EAAE,SAAS,iBAAiBC,6BAAAA,kBADnBC,kBAAAA,SAAS;EAAC;EAAS;EAAgB;EAAY,EAAE,cAAc,MAAM,CACzB;AAE3D,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,WAAU;EACV,KAAK;EACL,GAAK;EACL,kBAAiB;EACjB,CAAA;EAEJ;AAEF,UAAU,UAAUA,kBAAAA,UAAU;AAC9B,UAAU,cAAc"}

package/cjs/components/MaskInput/use-mask-input-props.cjs

@@ -3,8 +3,8 @@ require("../../_virtual/_rolldown/runtime.cjs");
 let _mantine_hooks = require("@mantine/hooks");
 //#region packages/@mantine/core/src/components/MaskInput/use-mask-input-props.ts
 function useMaskInputProps(props) {
-	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, ref, ...elementProps } = props;
-	const { ref: maskCallbackRef } = (0, _mantine_hooks.useMask)({
+	const { mask, tokens, modify, separate, slotChar, alwaysShowMask, showMaskOnFocus, transform, autoClear, onChangeRaw, onComplete, beforeMaskedStateChange, resetRef, ref, ...elementProps } = props;
+	const { ref: maskCallbackRef, reset } = (0, _mantine_hooks.useMask)({
 		mask,
 		tokens,
 		modify,
@@ -18,6 +18,7 @@ function useMaskInputProps(props) {
 		onComplete,
 		beforeMaskedStateChange
 	});
+	(0, _mantine_hooks.assignRef)(resetRef, reset);
 	return {
 		maskRef: (0, _mantine_hooks.useMergedRef)(ref, maskCallbackRef),
 		elementProps

package/cjs/components/MaskInput/use-mask-input-props.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-mask-input-props.cjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,qBAAA,GAAA,eAAA,SAA4B;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QAAO;EAAE,UAAA,GAAA,eAAA,cAFoB,KAAK,gBAAgB;EAEhC;EAAc"}
+{"version":3,"file":"use-mask-input-props.cjs","names":[],"sources":["../../../src/components/MaskInput/use-mask-input-props.ts"],"sourcesContent":["import { assignRef, useMask, useMergedRef } from '@mantine/hooks';\nimport type { MaskInputProps } from './MaskInput';\n\nexport function useMaskInputProps(props: MaskInputProps & { ref?: React.Ref<HTMLInputElement> }) {\n  const {\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n    resetRef,\n    ref,\n    ...elementProps\n  } = props;\n\n  const { ref: maskCallbackRef, reset } = useMask({\n    mask,\n    tokens,\n    modify,\n    separate,\n    slotChar,\n    alwaysShowMask,\n    showMaskOnFocus,\n    transform,\n    autoClear,\n    onChangeRaw,\n    onComplete,\n    beforeMaskedStateChange,\n  });\n\n  assignRef(resetRef, reset);\n\n  const maskRef = useMergedRef(ref, maskCallbackRef);\n\n  return { maskRef, elementProps };\n}\n"],"mappings":";;;;AAGA,SAAgB,kBAAkB,OAA+D;CAC/F,MAAM,EACJ,MACA,QACA,QACA,UACA,UACA,gBACA,iBACA,WACA,WACA,aACA,YACA,yBACA,UACA,KACA,GAAG,iBACD;CAEJ,MAAM,EAAE,KAAK,iBAAiB,WAAA,GAAA,eAAA,SAAkB;EAC9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,EAAA,GAAA,eAAA,WAAU,UAAU,MAAM;AAI1B,QAAO;EAAE,UAAA,GAAA,eAAA,cAFoB,KAAK,gBAAgB;EAEhC;EAAc"}

package/cjs/components/MultiSelect/MultiSelect.cjs

@@ -11,6 +11,7 @@ const require_get_options_lockup = require("../Combobox/get-options-lockup/get-o
 const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
 const require_Combobox = require("../Combobox/Combobox.cjs");
 const require_OptionsDropdown = require("../Combobox/OptionsDropdown/OptionsDropdown.cjs");
+const require_use_pills_reorder = require("../Combobox/use-pills-reorder/use-pills-reorder.cjs");
 const require_Pill = require("../Pill/Pill.cjs");
 const require_PillsInput = require("../PillsInput/PillsInput.cjs");
 const require_filter_picked_values = require("./filter-picked-values.cjs");
@@ -35,8 +36,12 @@ const defaultProps = {
 	size: "sm"
 };
 const MultiSelect = require_factory.genericFactory((_props) => {
-	const props = require_use_props.useProps("MultiSelect", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, ...others } = props;
+	const props = require_use_props.useProps([
+		"Input",
+		"InputWrapper",
+		"MultiSelect"
+	], defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = (0, _mantine_hooks.useId)(id);
 	const parsedData = require_get_parsed_combobox_data.getParsedComboboxData(data);
 	const optionsLockup = require_get_options_lockup.getOptionsLockup(parsedData);
@@ -60,6 +65,11 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 		finalValue: [],
 		onChange
 	});
+	const { getPillProps, getListProps, handleInputKeyDown } = require_use_pills_reorder.usePillsReorder({
+		value: _value,
+		onChange: setValue,
+		enabled: withPillsReorder && !disabled && !readOnly
+	});
 	const [_searchValue, setSearchValue] = (0, _mantine_hooks.useUncontrolled)({
 		value: searchValue,
 		defaultValue: defaultSearchValue,
@@ -86,6 +96,7 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 	});
 	const handleInputKeydown = (event) => {
 		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
 		if (event.key === " " && !searchable) {
 			event.preventDefault();
 			combobox.toggleDropdown();
@@ -94,9 +105,11 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 			onRemove?.(_value[_value.length - 1]);
 			setValue(_value.slice(0, _value.length - 1));
 		}
+		handleInputKeyDown(event);
 	};
 	const values = _value.map((item, index) => {
 		const optionData = optionsLockup[`${item}`] || retainedSelectedOptions.current[`${item}`];
+		const reorderProps = getPillProps(index);
 		if (renderPill) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: renderPill({
 			option: optionData,
 			value: item,
@@ -104,7 +117,8 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 				setValue(_value.filter((i) => item !== i));
 				onRemove?.(item);
 			},
-			disabled
+			disabled,
+			reorderProps
 		}) }, `${item}-${index}`);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Pill.Pill, {
 			withRemoveButton: !readOnly && !optionsLockup[`${item}`]?.disabled,
@@ -115,6 +129,7 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 			unstyled,
 			disabled,
 			...getStyles("pill"),
+			...reorderProps,
 			children: optionData?.label || item
 		}, `${item}-${index}`);
 	});
@@ -219,6 +234,7 @@ const MultiSelect = require_factory.genericFactory((_props) => {
 				disabled,
 				unstyled,
 				...getStyles("pillsList", { style: pillsListStyle }),
+				...getListProps(),
 				children: [values, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.EventsTarget, {
 					autoComplete,
 					withExpandedAttribute: true,