@mantine/dates 9.0.2 → 9.1.1

package/cjs/components/YearPicker/YearPicker.cjs

@@ -2,14 +2,35 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_use_dates_state = require("../../hooks/use-dates-state/use-dates-state.cjs");
 const require_Calendar = require("../Calendar/Calendar.cjs");
+const require_pick_calendar_levels_props = require("../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.cjs");
+const require_YearPicker_module = require("./YearPicker.module.cjs");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _mantine_core = require("@mantine/core");
 //#region packages/@mantine/dates/src/components/YearPicker/YearPicker.tsx
+const varsResolver = (0, _mantine_core.createVarsResolver)((_, { size }) => ({ yearPickerRoot: { "--preset-font-size": (0, _mantine_core.getFontSize)(size) } }));
 const defaultProps = { type: "default" };
 const YearPicker = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("YearPicker", defaultProps, _props);
-	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getYearControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onYearSelect, __updateDateOnYearSelect, ...others } = props;
-	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = require_use_dates_state.useDatesState({
+	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getYearControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onYearSelect, __updateDateOnYearSelect, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, attributes, ...rest } = props;
+	const { calendarProps, others } = require_pick_calendar_levels_props.pickCalendarProps(rest);
+	const setDateRef = (0, react.useRef)(null);
+	const setLevelRef = (0, react.useRef)(null);
+	const getStyles = (0, _mantine_core.useStyles)({
+		name: __staticSelector || "YearPicker",
+		classes: require_YearPicker_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: presets ? "yearPickerRoot" : void 0,
+		varsResolver,
+		vars
+	});
+	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = require_use_dates_state.useDatesState({
 		type,
 		level: "year",
 		allowDeselect,
@@ -24,7 +45,12 @@ const YearPicker = (0, _mantine_core.factory)((_props) => {
 		styles,
 		props
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+	const calendar = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		size,
+		...calendarProps,
+		...!presets ? others : {},
 		minLevel: "decade",
 		__updateDateOnYearSelect: __updateDateOnYearSelect ?? false,
 		__staticSelector: __staticSelector || "YearPicker",
@@ -38,12 +64,46 @@ const YearPicker = (0, _mantine_core.factory)((_props) => {
 			...getControlProps(date),
 			...getYearControlProps?.(date)
 		}),
-		classNames: resolvedClassNames,
-		styles: resolvedStyles,
-		...others
+		__setDateRef: setDateRef,
+		__setLevelRef: setLevelRef,
+		__stopPropagation,
+		attributes,
+		...!presets ? {
+			className,
+			style
+		} : {}
+	});
+	if (!presets) return calendar;
+	const handlePresetSelect = (val) => {
+		const _val = Array.isArray(val) ? val[0] : val;
+		if (_val !== void 0) {
+			setDateRef.current?.(_val);
+			setLevelRef.current?.("decade");
+			__onPresetSelect ? __onPresetSelect(_val) : setValue(val);
+		}
+	};
+	const presetButtons = presets.map((preset, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.UnstyledButton, {
+		...getStyles("presetButton"),
+		onClick: () => handlePresetSelect(preset.value),
+		onMouseDown: (event) => event.preventDefault(),
+		"data-mantine-stop-propagation": __stopPropagation || void 0,
+		children: preset.label
+	}, index));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_mantine_core.Box, {
+		...getStyles("yearPickerRoot"),
+		size,
+		...others,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...getStyles("presetsList"),
+			children: presetButtons
+		}), calendar]
 	});
 });
-YearPicker.classes = require_Calendar.Calendar.classes;
+YearPicker.classes = {
+	...require_Calendar.Calendar.classes,
+	...require_YearPicker_module.default
+};
+YearPicker.varsResolver = varsResolver;
 YearPicker.displayName = "@mantine/dates/YearPicker";
 //#endregion
 exports.YearPicker = YearPicker;

package/cjs/components/YearPicker/YearPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearPicker.cjs","names":["useDatesState","Calendar"],"sources":["../../../src/components/YearPicker/YearPicker.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport { DatePickerType, DateStringValue, PickerBaseProps } from '../../types';\nimport { Calendar, CalendarBaseProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\n\nexport type YearPickerStylesNames = DecadeLevelGroupStylesNames;\n\nexport interface YearPickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    Omit<\n      CalendarBaseProps,\n      'onNextYear' | 'onPreviousYear' | 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'\n    > {}\n\nexport interface YearPickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    YearPickerBaseProps<Type>,\n    StylesApiProps<YearPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Called when year is selected */\n  onYearSelect?: (date: DateStringValue) => void;\n}\n\nexport type YearPickerFactory = Factory<{\n  props: YearPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: YearPickerStylesNames;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n} satisfies Partial<YearPickerProps>;\n\ntype YearPickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: YearPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<YearPickerFactory>;\n\nexport const YearPicker: YearPickerComponent = factory<YearPickerFactory>((_props) => {\n  const props = useProps('YearPicker', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    vars,\n    type,\n    defaultValue,\n    value,\n    onChange,\n    __staticSelector,\n    getYearControlProps,\n    allowSingleDateInRange,\n    allowDeselect,\n    onMouseLeave,\n    onYearSelect,\n    __updateDateOnYearSelect,\n    ...others\n  } = props;\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({\n    type: type as any,\n    level: 'year',\n    allowDeselect,\n    allowSingleDateInRange,\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    onMouseLeave,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Calendar\n      minLevel=\"decade\"\n      __updateDateOnYearSelect={__updateDateOnYearSelect ?? false}\n      __staticSelector={__staticSelector || 'YearPicker'}\n      onMouseLeave={onRootMouseLeave}\n      onYearMouseEnter={(_event, date) => onHoveredDateChange(date)}\n      onYearSelect={(date) => {\n        onDateChange(date);\n        onYearSelect?.(date);\n      }}\n      getYearControlProps={(date) => ({\n        ...getControlProps(date),\n        ...getYearControlProps?.(date),\n      })}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      {...others}\n    />\n  );\n}) as any;\n\nYearPicker.classes = Calendar.classes;\nYearPicker.displayName = '@mantine/dates/YearPicker';\n\nexport namespace YearPicker {\n  export type Props<Type extends DatePickerType = 'default'> = YearPickerProps<Type>;\n  export type BaseProps = YearPickerBaseProps;\n  export type StylesNames = YearPickerStylesNames;\n  export type Factory = YearPickerFactory;\n}\n"],"mappings":";;;;;;;AA2CA,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAA,GAAA,cAAA,UAA8D,WAAW;CACpF,MAAM,SAAA,GAAA,cAAA,UAAiB,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,qBACA,wBACA,eACA,cACA,cACA,0BACA,GAAG,WACD;CAEJ,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,oBAAoBA,wBAAAA,cAAc;EACvF;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA2D;EACrF;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,UAAS;EACT,0BAA0B,4BAA4B;EACtD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,mBAAmB,QAAQ,SAAS,oBAAoB,KAAK;EAC7D,eAAe,SAAS;AACtB,gBAAa,KAAK;AAClB,kBAAe,KAAK;;EAEtB,sBAAsB,UAAU;GAC9B,GAAG,gBAAgB,KAAK;GACxB,GAAG,sBAAsB,KAAK;GAC/B;EACD,YAAY;EACZ,QAAQ;EACR,GAAI;EACJ,CAAA;EAEJ;AAEF,WAAW,UAAUA,iBAAAA,SAAS;AAC9B,WAAW,cAAc"}
+{"version":3,"file":"YearPicker.cjs","names":["pickCalendarProps","useDatesState","Calendar","UnstyledButton","Box","classes"],"sources":["../../../src/components/YearPicker/YearPicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  UnstyledButton,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport {\n  CalendarLevel,\n  DatePickerType,\n  DateStringValue,\n  DateValue,\n  PickerBaseProps,\n} from '../../types';\nimport { Calendar, CalendarBaseProps, pickCalendarProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport classes from './YearPicker.module.css';\n\nexport interface YearPickerPreset<Type extends DatePickerType> {\n  value: Type extends 'range'\n    ? [DateStringValue | null, DateStringValue | null]\n    : Type extends 'multiple'\n      ? DateStringValue[]\n      : DateStringValue | null;\n  label: React.ReactNode;\n}\n\nexport type YearPickerCssVariables = {\n  yearPickerRoot: '--preset-font-size';\n};\n\nexport type YearPickerStylesNames =\n  | DecadeLevelGroupStylesNames\n  | 'presetsList'\n  | 'presetButton'\n  | 'yearPickerRoot';\n\nexport interface YearPickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    Omit<\n      CalendarBaseProps,\n      'onNextYear' | 'onPreviousYear' | 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'\n    > {\n  /** Predefined values to pick from */\n  presets?: YearPickerPreset<Type>[];\n\n  /** If defined, called with preset value, suppresses `onChange` call */\n  __onPresetSelect?: (\n    preset: Type extends 'range'\n      ? [DateStringValue | null, DateStringValue | null]\n      : DateStringValue | null\n  ) => void;\n}\n\nexport interface YearPickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    YearPickerBaseProps<Type>,\n    StylesApiProps<YearPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Called when year is selected */\n  onYearSelect?: (date: DateStringValue) => void;\n}\n\nexport type YearPickerFactory = Factory<{\n  props: YearPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: YearPickerStylesNames;\n  vars: YearPickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<YearPickerFactory>((_, { size }) => ({\n  yearPickerRoot: {\n    '--preset-font-size': getFontSize(size),\n  },\n}));\n\nconst defaultProps = {\n  type: 'default',\n} satisfies Partial<YearPickerProps>;\n\ntype YearPickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: YearPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<YearPickerFactory>;\n\nexport const YearPicker: YearPickerComponent = factory<YearPickerFactory>((_props) => {\n  const props = useProps('YearPicker', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    vars,\n    type,\n    defaultValue,\n    value,\n    onChange,\n    __staticSelector,\n    getYearControlProps,\n    allowSingleDateInRange,\n    allowDeselect,\n    onMouseLeave,\n    onYearSelect,\n    __updateDateOnYearSelect,\n    __onPresetSelect,\n    __stopPropagation,\n    presets,\n    className,\n    style,\n    unstyled,\n    size,\n    attributes,\n    ...rest\n  } = props;\n\n  const { calendarProps, others } = pickCalendarProps(rest);\n  const setDateRef = useRef<((date: DateValue) => void) | null>(null);\n  const setLevelRef = useRef<((level: CalendarLevel) => void) | null>(null);\n\n  const getStyles = useStyles<YearPickerFactory>({\n    name: __staticSelector || 'YearPicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: presets ? 'yearPickerRoot' : undefined,\n    varsResolver,\n    vars,\n  });\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } =\n    useDatesState({\n      type: type as any,\n      level: 'year',\n      allowDeselect,\n      allowSingleDateInRange,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      onMouseLeave,\n    });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const calendar = (\n    <Calendar\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      size={size}\n      {...calendarProps}\n      {...(!presets ? others : {})}\n      minLevel=\"decade\"\n      __updateDateOnYearSelect={__updateDateOnYearSelect ?? false}\n      __staticSelector={__staticSelector || 'YearPicker'}\n      onMouseLeave={onRootMouseLeave}\n      onYearMouseEnter={(_event, date) => onHoveredDateChange(date)}\n      onYearSelect={(date) => {\n        onDateChange(date);\n        onYearSelect?.(date);\n      }}\n      getYearControlProps={(date) => ({\n        ...getControlProps(date),\n        ...getYearControlProps?.(date),\n      })}\n      __setDateRef={setDateRef}\n      __setLevelRef={setLevelRef}\n      __stopPropagation={__stopPropagation}\n      attributes={attributes}\n      {...(!presets ? { className, style } : {})}\n    />\n  );\n\n  if (!presets) {\n    return calendar;\n  }\n\n  const handlePresetSelect = (\n    val: DateStringValue | null | [DateStringValue | null, DateStringValue | null]\n  ) => {\n    const _val = Array.isArray(val) ? val[0] : val;\n    if (_val !== undefined) {\n      setDateRef.current?.(_val);\n      setLevelRef.current?.('decade');\n      __onPresetSelect ? __onPresetSelect(_val) : setValue(val);\n    }\n  };\n\n  const presetButtons = presets.map((preset, index) => (\n    <UnstyledButton\n      key={index}\n      {...getStyles('presetButton')}\n      onClick={() => handlePresetSelect(preset.value)}\n      onMouseDown={(event) => event.preventDefault()}\n      data-mantine-stop-propagation={__stopPropagation || undefined}\n    >\n      {preset.label}\n    </UnstyledButton>\n  ));\n\n  return (\n    <Box {...getStyles('yearPickerRoot')} size={size} {...others}>\n      <div {...getStyles('presetsList')}>{presetButtons}</div>\n      {calendar}\n    </Box>\n  );\n}) as any;\n\nYearPicker.classes = { ...Calendar.classes, ...classes };\nYearPicker.varsResolver = varsResolver;\nYearPicker.displayName = '@mantine/dates/YearPicker';\n\nexport namespace YearPicker {\n  export type Props<Type extends DatePickerType = 'default'> = YearPickerProps<Type>;\n  export type BaseProps = YearPickerBaseProps;\n  export type StylesNames = YearPickerStylesNames;\n  export type Factory = YearPickerFactory;\n}\n"],"mappings":";;;;;;;;;;AAoFA,MAAM,gBAAA,GAAA,cAAA,qBAAsD,GAAG,EAAE,YAAY,EAC3E,gBAAgB,EACd,uBAAA,GAAA,cAAA,aAAkC,KAAK,EACxC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAA,GAAA,cAAA,UAA8D,WAAW;CACpF,MAAM,SAAA,GAAA,cAAA,UAAiB,cAAc,cAAc,OAAO;CAC1D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,qBACA,wBACA,eACA,cACA,cACA,0BACA,kBACA,mBACA,SACA,WACA,OACA,UACA,MACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CACzD,MAAM,cAAA,GAAA,MAAA,QAAwD,KAAK;CACnE,MAAM,eAAA,GAAA,MAAA,QAA8D,KAAK;CAEzE,MAAM,aAAA,GAAA,cAAA,WAAyC;EAC7C,MAAM,oBAAoB;EAC1B,SAAA,0BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,mBAAmB,KAAA;EAC3C;EACA;EACD,CAAC;CAEF,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,iBAAiB,aAC5EC,wBAAAA,cAAc;EACN;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAA2D;EACrF;EACA;EACA;EACD,CAAC;CAEF,MAAM,WACJ,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EACJ,GAAK,CAAC,UAAU,SAAS,EAAE;EAC3B,UAAS;EACT,0BAA0B,4BAA4B;EACtD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,mBAAmB,QAAQ,SAAS,oBAAoB,KAAK;EAC7D,eAAe,SAAS;AACtB,gBAAa,KAAK;AAClB,kBAAe,KAAK;;EAEtB,sBAAsB,UAAU;GAC9B,GAAG,gBAAgB,KAAK;GACxB,GAAG,sBAAsB,KAAK;GAC/B;EACD,cAAc;EACd,eAAe;EACI;EACP;EACZ,GAAK,CAAC,UAAU;GAAE;GAAW;GAAO,GAAG,EAAE;EACzC,CAAA;AAGJ,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,sBACJ,QACG;EACH,MAAM,OAAO,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;AAC3C,MAAI,SAAS,KAAA,GAAW;AACtB,cAAW,UAAU,KAAK;AAC1B,eAAY,UAAU,SAAS;AAC/B,sBAAmB,iBAAiB,KAAK,GAAG,SAAS,IAAI;;;CAI7D,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,UACzC,iBAAA,GAAA,kBAAA,KAACC,cAAAA,gBAAD;EAEE,GAAI,UAAU,eAAe;EAC7B,eAAe,mBAAmB,OAAO,MAAM;EAC/C,cAAc,UAAU,MAAM,gBAAgB;EAC9C,iCAA+B,qBAAqB,KAAA;YAEnD,OAAO;EACO,EAPV,MAOU,CACjB;AAEF,QACE,iBAAA,GAAA,kBAAA,MAACC,cAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAQ;EAAM,GAAI;YAAtD,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,cAAc;aAAG;GAAoB,CAAA,EACvD,SACG;;EAER;AAEF,WAAW,UAAU;CAAE,GAAGF,iBAAAA,SAAS;CAAS,GAAGG,0BAAAA;CAAS;AACxD,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/cjs/components/YearPicker/YearPicker.module.cjs

@@ -0,0 +1,11 @@
+"use client";
+//#region packages/@mantine/dates/src/components/YearPicker/YearPicker.module.css
+var YearPicker_module_default = {
+	"yearPickerRoot": "m_d01e596f",
+	"presetsList": "m_52a6b4b0",
+	"presetButton": "m_b0d93233"
+};
+//#endregion
+exports.default = YearPicker_module_default;
+
+//# sourceMappingURL=YearPicker.module.cjs.map

package/cjs/components/YearPicker/YearPicker.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearPicker.module.cjs","names":[],"sources":["../../../src/components/YearPicker/YearPicker.module.css"],"sourcesContent":[".yearPickerRoot {\n  display: flex;\n  font-size: var(--preset-font-size);\n}\n\n.presetsList {\n  display: flex;\n  flex-direction: column;\n  border-inline-end: 1px solid;\n  padding-inline-end: 0.5em;\n  margin-inline-end: 0.5em;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-5);\n  }\n}\n\n.presetButton {\n  padding: 0.52em 0.8em;\n  border-radius: var(--mantine-radius-default);\n  font-size: var(--preset-font-size);\n  white-space: nowrap;\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/YearPickerInput/YearPickerInput.cjs

@@ -18,7 +18,7 @@ const defaultProps = {
 };
 const YearPickerInput = (0, _mantine_core.factory)((_props) => {
 	const props = (0, _mantine_core.useProps)("YearPickerInput", defaultProps, _props);
-	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, attributes, ...rest } = props;
+	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, presets, attributes, ...rest } = props;
 	const { resolvedClassNames, resolvedStyles } = (0, _mantine_core.useResolvedStylesApi)({
 		classNames,
 		styles,
@@ -76,6 +76,7 @@ const YearPickerInput = (0, _mantine_core.factory)((_props) => {
 			__stopPropagation: dropdownType === "popover",
 			minDate,
 			maxDate,
+			presets,
 			attributes
 		})
 	});

package/cjs/components/YearPickerInput/YearPickerInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearPickerInput.cjs","names":["pickCalendarProps","useDatesInput","PickerInputBase","YearPicker","getDefaultClampedDate"],"sources":["../../../src/components/YearPickerInput/YearPickerInput.tsx"],"sourcesContent":["import {\n  __InputStylesNames,\n  BoxProps,\n  factory,\n  Factory,\n  InputVariant,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\nimport { YearPicker, YearPickerBaseProps, YearPickerStylesNames } from '../YearPicker';\n\nexport type YearPickerInputStylesNames = __InputStylesNames | 'placeholder' | YearPickerStylesNames;\n\nexport interface YearPickerInputProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    DateInputSharedProps,\n    YearPickerBaseProps<Type>,\n    StylesApiProps<YearPickerInputFactory> {\n  /** `dayjs` format to display input value @default \"YYYY\" */\n  valueFormat?: string;\n}\n\nexport type YearPickerInputFactory = Factory<{\n  props: YearPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: YearPickerInputStylesNames;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n  size: 'sm',\n  valueFormat: 'YYYY',\n  closeOnChange: true,\n  sortDates: true,\n  dropdownType: 'popover',\n} satisfies Partial<YearPickerInputProps>;\n\ntype YearPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n  props: YearPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<YearPickerInputFactory>;\n\nexport const YearPickerInput: YearPickerInputComponent = factory<YearPickerInputFactory>(\n  (_props) => {\n    const props = useProps('YearPickerInput', defaultProps, _props);\n    const {\n      type,\n      value,\n      defaultValue,\n      onChange,\n      valueFormat,\n      labelSeparator,\n      locale,\n      classNames,\n      styles,\n      unstyled,\n      closeOnChange,\n      size,\n      variant,\n      dropdownType,\n      sortDates,\n      minDate,\n      maxDate,\n      vars,\n      valueFormatter,\n      attributes,\n      ...rest\n    } = props;\n\n    const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerInputFactory>({\n      classNames,\n      styles,\n      props,\n    });\n\n    const { calendarProps, others } = pickCalendarProps(rest);\n\n    const {\n      _value,\n      setValue,\n      formattedValue,\n      dropdownHandlers,\n      dropdownOpened,\n      onClear,\n      shouldClear,\n    } = useDatesInput({\n      type: type as any,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      locale,\n      format: valueFormat,\n      labelSeparator,\n      closeOnChange,\n      sortDates,\n      valueFormatter,\n    });\n\n    return (\n      <PickerInputBase\n        formattedValue={formattedValue}\n        dropdownOpened={dropdownOpened}\n        dropdownHandlers={dropdownHandlers}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        onClear={onClear}\n        shouldClear={shouldClear}\n        value={_value}\n        size={size}\n        variant={variant}\n        dropdownType={dropdownType}\n        {...others}\n        type={type as any}\n        __staticSelector=\"YearPickerInput\"\n        attributes={attributes}\n      >\n        <YearPicker\n          {...calendarProps}\n          size={size}\n          variant={variant}\n          type={type}\n          value={_value}\n          defaultDate={\n            calendarProps.defaultDate ||\n            (Array.isArray(_value)\n              ? _value[0] || getDefaultClampedDate({ maxDate, minDate })\n              : _value || getDefaultClampedDate({ maxDate, minDate }))\n          }\n          onChange={setValue}\n          locale={locale}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          __staticSelector=\"YearPickerInput\"\n          __stopPropagation={dropdownType === 'popover'}\n          minDate={minDate}\n          maxDate={maxDate}\n          attributes={attributes}\n        />\n      </PickerInputBase>\n    );\n  }\n) as any;\n\nYearPickerInput.classes = { ...PickerInputBase.classes, ...YearPicker.classes };\nYearPickerInput.displayName = '@mantine/dates/YearPickerInput';\n\nexport namespace YearPickerInput {\n  export type Props<Type extends DatePickerType = 'default'> = YearPickerInputProps<Type>;\n  export type StylesNames = YearPickerInputStylesNames;\n  export type Factory = YearPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAAA,GAAA,cAAA,UACV,WAAW;CACV,MAAM,SAAA,GAAA,cAAA,UAAiB,mBAAmB,cAAc,OAAO;CAC/D,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAAgE;EAC1F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACEC,wBAAAA,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACE;EACN,kBAAiB;EACL;YAEZ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAMC,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAUA,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,gBAAgB,UAAU;CAAE,GAAGF,wBAAAA,gBAAgB;CAAS,GAAGC,mBAAAA,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}
+{"version":3,"file":"YearPickerInput.cjs","names":["pickCalendarProps","useDatesInput","PickerInputBase","YearPicker","getDefaultClampedDate"],"sources":["../../../src/components/YearPickerInput/YearPickerInput.tsx"],"sourcesContent":["import {\n  __InputStylesNames,\n  BoxProps,\n  factory,\n  Factory,\n  InputVariant,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\nimport { YearPicker, YearPickerBaseProps, YearPickerStylesNames } from '../YearPicker';\n\nexport type YearPickerInputStylesNames = __InputStylesNames | 'placeholder' | YearPickerStylesNames;\n\nexport interface YearPickerInputProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    DateInputSharedProps,\n    YearPickerBaseProps<Type>,\n    StylesApiProps<YearPickerInputFactory> {\n  /** `dayjs` format to display input value @default \"YYYY\" */\n  valueFormat?: string;\n}\n\nexport type YearPickerInputFactory = Factory<{\n  props: YearPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: YearPickerInputStylesNames;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n  size: 'sm',\n  valueFormat: 'YYYY',\n  closeOnChange: true,\n  sortDates: true,\n  dropdownType: 'popover',\n} satisfies Partial<YearPickerInputProps>;\n\ntype YearPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n  props: YearPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<YearPickerInputFactory>;\n\nexport const YearPickerInput: YearPickerInputComponent = factory<YearPickerInputFactory>(\n  (_props) => {\n    const props = useProps('YearPickerInput', defaultProps, _props);\n    const {\n      type,\n      value,\n      defaultValue,\n      onChange,\n      valueFormat,\n      labelSeparator,\n      locale,\n      classNames,\n      styles,\n      unstyled,\n      closeOnChange,\n      size,\n      variant,\n      dropdownType,\n      sortDates,\n      minDate,\n      maxDate,\n      vars,\n      valueFormatter,\n      presets,\n      attributes,\n      ...rest\n    } = props;\n\n    const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<YearPickerInputFactory>({\n      classNames,\n      styles,\n      props,\n    });\n\n    const { calendarProps, others } = pickCalendarProps(rest);\n\n    const {\n      _value,\n      setValue,\n      formattedValue,\n      dropdownHandlers,\n      dropdownOpened,\n      onClear,\n      shouldClear,\n    } = useDatesInput({\n      type: type as any,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      locale,\n      format: valueFormat,\n      labelSeparator,\n      closeOnChange,\n      sortDates,\n      valueFormatter,\n    });\n\n    return (\n      <PickerInputBase\n        formattedValue={formattedValue}\n        dropdownOpened={dropdownOpened}\n        dropdownHandlers={dropdownHandlers}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        onClear={onClear}\n        shouldClear={shouldClear}\n        value={_value}\n        size={size}\n        variant={variant}\n        dropdownType={dropdownType}\n        {...others}\n        type={type as any}\n        __staticSelector=\"YearPickerInput\"\n        attributes={attributes}\n      >\n        <YearPicker\n          {...calendarProps}\n          size={size}\n          variant={variant}\n          type={type}\n          value={_value}\n          defaultDate={\n            calendarProps.defaultDate ||\n            (Array.isArray(_value)\n              ? _value[0] || getDefaultClampedDate({ maxDate, minDate })\n              : _value || getDefaultClampedDate({ maxDate, minDate }))\n          }\n          onChange={setValue}\n          locale={locale}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          __staticSelector=\"YearPickerInput\"\n          __stopPropagation={dropdownType === 'popover'}\n          minDate={minDate}\n          maxDate={maxDate}\n          presets={presets}\n          attributes={attributes}\n        />\n      </PickerInputBase>\n    );\n  }\n) as any;\n\nYearPickerInput.classes = { ...PickerInputBase.classes, ...YearPicker.classes };\nYearPickerInput.displayName = '@mantine/dates/YearPickerInput';\n\nexport namespace YearPickerInput {\n  export type Props<Type extends DatePickerType = 'default'> = YearPickerInputProps<Type>;\n  export type StylesNames = YearPickerInputStylesNames;\n  export type Factory = YearPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAAA,GAAA,cAAA,UACV,WAAW;CACV,MAAM,SAAA,GAAA,cAAA,UAAiB,mBAAmB,cAAc,OAAO;CAC/D,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,oBAAA,GAAA,cAAA,sBAAgE;EAC1F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAWA,mCAAAA,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACEC,wBAAAA,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACE;EACN,kBAAiB;EACL;YAEZ,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAMC,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAUA,iCAAAA,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,gBAAgB,UAAU;CAAE,GAAGF,wBAAAA,gBAAgB;CAAS,GAAGC,mBAAAA,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}

package/esm/components/MonthPicker/MonthPicker.mjs

@@ -1,14 +1,35 @@
 "use client";
 import { useDatesState } from "../../hooks/use-dates-state/use-dates-state.mjs";
 import { Calendar } from "../Calendar/Calendar.mjs";
-import { jsx } from "react/jsx-runtime";
-import { factory, useProps, useResolvedStylesApi } from "@mantine/core";
+import { pickCalendarProps } from "../Calendar/pick-calendar-levels-props/pick-calendar-levels-props.mjs";
+import MonthPicker_module_default from "./MonthPicker.module.mjs";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, UnstyledButton, createVarsResolver, factory, getFontSize, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 //#region packages/@mantine/dates/src/components/MonthPicker/MonthPicker.tsx
+const varsResolver = createVarsResolver((_, { size }) => ({ monthPickerRoot: { "--preset-font-size": getFontSize(size) } }));
 const defaultProps = { type: "default" };
 const MonthPicker = factory((_props) => {
 	const props = useProps("MonthPicker", defaultProps, _props);
-	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getMonthControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onMonthSelect, __updateDateOnMonthSelect, onLevelChange, ...others } = props;
-	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({
+	const { classNames, styles, vars, type, defaultValue, value, onChange, __staticSelector, getMonthControlProps, allowSingleDateInRange, allowDeselect, onMouseLeave, onMonthSelect, __updateDateOnMonthSelect, __onPresetSelect, __stopPropagation, presets, className, style, unstyled, size, attributes, onLevelChange, ...rest } = props;
+	const { calendarProps, others } = pickCalendarProps(rest);
+	const setDateRef = useRef(null);
+	const setLevelRef = useRef(null);
+	const getStyles = useStyles({
+		name: __staticSelector || "MonthPicker",
+		classes: MonthPicker_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: presets ? "monthPickerRoot" : void 0,
+		varsResolver,
+		vars
+	});
+	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = useDatesState({
 		type,
 		level: "month",
 		allowDeselect,
@@ -23,7 +44,12 @@ const MonthPicker = factory((_props) => {
 		styles,
 		props
 	});
-	return /* @__PURE__ */ jsx(Calendar, {
+	const calendar = /* @__PURE__ */ jsx(Calendar, {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		size,
+		...calendarProps,
+		...!presets ? others : {},
 		minLevel: "year",
 		__updateDateOnMonthSelect: __updateDateOnMonthSelect ?? false,
 		__staticSelector: __staticSelector || "MonthPicker",
@@ -37,13 +63,47 @@ const MonthPicker = factory((_props) => {
 			...getControlProps(date),
 			...getMonthControlProps?.(date)
 		}),
-		classNames: resolvedClassNames,
-		styles: resolvedStyles,
 		onLevelChange,
-		...others
+		__setDateRef: setDateRef,
+		__setLevelRef: setLevelRef,
+		__stopPropagation,
+		attributes,
+		...!presets ? {
+			className,
+			style
+		} : {}
+	});
+	if (!presets) return calendar;
+	const handlePresetSelect = (val) => {
+		const _val = Array.isArray(val) ? val[0] : val;
+		if (_val !== void 0) {
+			setDateRef.current?.(_val);
+			setLevelRef.current?.("year");
+			__onPresetSelect ? __onPresetSelect(_val) : setValue(val);
+		}
+	};
+	const presetButtons = presets.map((preset, index) => /* @__PURE__ */ jsx(UnstyledButton, {
+		...getStyles("presetButton"),
+		onClick: () => handlePresetSelect(preset.value),
+		onMouseDown: (event) => event.preventDefault(),
+		"data-mantine-stop-propagation": __stopPropagation || void 0,
+		children: preset.label
+	}, index));
+	return /* @__PURE__ */ jsxs(Box, {
+		...getStyles("monthPickerRoot"),
+		size,
+		...others,
+		children: [/* @__PURE__ */ jsx("div", {
+			...getStyles("presetsList"),
+			children: presetButtons
+		}), calendar]
 	});
 });
-MonthPicker.classes = Calendar.classes;
+MonthPicker.classes = {
+	...Calendar.classes,
+	...MonthPicker_module_default
+};
+MonthPicker.varsResolver = varsResolver;
 MonthPicker.displayName = "@mantine/dates/MonthPicker";
 //#endregion
 export { MonthPicker };

package/esm/components/MonthPicker/MonthPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonthPicker.mjs","names":[],"sources":["../../../src/components/MonthPicker/MonthPicker.tsx"],"sourcesContent":["import {\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport { CalendarLevel, DatePickerType, DateStringValue, PickerBaseProps } from '../../types';\nimport { Calendar, CalendarBaseProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport { YearLevelGroupStylesNames } from '../YearLevelGroup';\n\nexport type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames;\n\ntype MonthPickerLevel = Exclude<CalendarLevel, 'month'>;\n\nexport interface MonthPickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    YearLevelBaseSettings,\n    Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {\n  /** Max level that user can go up to @default 'decade' */\n  maxLevel?: CalendarLevel;\n\n  /** Initial displayed level (uncontrolled) */\n  defaultLevel?: CalendarLevel;\n\n  /** Current displayed level (controlled) */\n  level?: CalendarLevel;\n\n  /** Called when level changes */\n  onLevelChange?: (level: MonthPickerLevel) => void;\n}\n\nexport interface MonthPickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    MonthPickerBaseProps<Type>,\n    StylesApiProps<MonthPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Called when month is selected */\n  onMonthSelect?: (date: DateStringValue) => void;\n}\n\nexport type MonthPickerFactory = Factory<{\n  props: MonthPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: MonthPickerStylesNames;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n} satisfies Partial<MonthPickerProps>;\n\ntype MonthPickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: MonthPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerFactory>;\n\nexport const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props) => {\n  const props = useProps('MonthPicker', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    vars,\n    type,\n    defaultValue,\n    value,\n    onChange,\n    __staticSelector,\n    getMonthControlProps,\n    allowSingleDateInRange,\n    allowDeselect,\n    onMouseLeave,\n    onMonthSelect,\n    __updateDateOnMonthSelect,\n    onLevelChange,\n    ...others\n  } = props;\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps } = useDatesState({\n    type: type as any,\n    level: 'month',\n    allowDeselect,\n    allowSingleDateInRange,\n    value,\n    defaultValue,\n    onChange: onChange as any,\n    onMouseLeave,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  return (\n    <Calendar\n      minLevel=\"year\"\n      __updateDateOnMonthSelect={__updateDateOnMonthSelect ?? false}\n      __staticSelector={__staticSelector || 'MonthPicker'}\n      onMouseLeave={onRootMouseLeave}\n      onMonthMouseEnter={(_event, date) => onHoveredDateChange(date)}\n      onMonthSelect={(date) => {\n        onDateChange(date);\n        onMonthSelect?.(date);\n      }}\n      getMonthControlProps={(date) => ({\n        ...getControlProps(date),\n        ...getMonthControlProps?.(date),\n      })}\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      onLevelChange={onLevelChange as any}\n      {...others}\n    />\n  );\n}) as any;\n\nMonthPicker.classes = Calendar.classes;\nMonthPicker.displayName = '@mantine/dates/MonthPicker';\n\nexport namespace MonthPicker {\n  export type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;\n  export type StylesNames = MonthPickerStylesNames;\n  export type Factory = MonthPickerFactory;\n}\n"],"mappings":";;;;;;AAyDA,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAoC,SAA6B,WAAW;CACvF,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,sBACA,wBACA,eACA,cACA,eACA,2BACA,eACA,GAAG,WACD;CAEJ,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,oBAAoB,cAAc;EACvF;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,UAAD;EACE,UAAS;EACT,2BAA2B,6BAA6B;EACxD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,oBAAoB,QAAQ,SAAS,oBAAoB,KAAK;EAC9D,gBAAgB,SAAS;AACvB,gBAAa,KAAK;AAClB,mBAAgB,KAAK;;EAEvB,uBAAuB,UAAU;GAC/B,GAAG,gBAAgB,KAAK;GACxB,GAAG,uBAAuB,KAAK;GAChC;EACD,YAAY;EACZ,QAAQ;EACO;EACf,GAAI;EACJ,CAAA;EAEJ;AAEF,YAAY,UAAU,SAAS;AAC/B,YAAY,cAAc"}
+{"version":3,"file":"MonthPicker.mjs","names":["classes"],"sources":["../../../src/components/MonthPicker/MonthPicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  UnstyledButton,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesState } from '../../hooks';\nimport {\n  CalendarLevel,\n  DatePickerType,\n  DateStringValue,\n  DateValue,\n  PickerBaseProps,\n} from '../../types';\nimport { Calendar, CalendarBaseProps, pickCalendarProps } from '../Calendar';\nimport { DecadeLevelBaseSettings } from '../DecadeLevel';\nimport { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';\nimport { YearLevelBaseSettings } from '../YearLevel';\nimport { YearLevelGroupStylesNames } from '../YearLevelGroup';\nimport classes from './MonthPicker.module.css';\n\nexport interface MonthPickerPreset<Type extends DatePickerType> {\n  value: Type extends 'range'\n    ? [DateStringValue | null, DateStringValue | null]\n    : Type extends 'multiple'\n      ? DateStringValue[]\n      : DateStringValue | null;\n  label: React.ReactNode;\n}\n\nexport type MonthPickerCssVariables = {\n  monthPickerRoot: '--preset-font-size';\n};\n\nexport type MonthPickerStylesNames =\n  | DecadeLevelGroupStylesNames\n  | YearLevelGroupStylesNames\n  | 'presetsList'\n  | 'presetButton'\n  | 'monthPickerRoot';\n\ntype MonthPickerLevel = Exclude<CalendarLevel, 'month'>;\n\nexport interface MonthPickerBaseProps<Type extends DatePickerType = 'default'>\n  extends\n    PickerBaseProps<Type>,\n    DecadeLevelBaseSettings,\n    YearLevelBaseSettings,\n    Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {\n  /** Max level that user can go up to @default 'decade' */\n  maxLevel?: CalendarLevel;\n\n  /** Initial displayed level (uncontrolled) */\n  defaultLevel?: CalendarLevel;\n\n  /** Current displayed level (controlled) */\n  level?: CalendarLevel;\n\n  /** Called when level changes */\n  onLevelChange?: (level: MonthPickerLevel) => void;\n\n  /** Predefined values to pick from */\n  presets?: MonthPickerPreset<Type>[];\n\n  /** If defined, called with preset value, suppresses `onChange` call */\n  __onPresetSelect?: (\n    preset: Type extends 'range'\n      ? [DateStringValue | null, DateStringValue | null]\n      : DateStringValue | null\n  ) => void;\n}\n\nexport interface MonthPickerProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    MonthPickerBaseProps<Type>,\n    StylesApiProps<MonthPickerFactory>,\n    ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {\n  /** Called when month is selected */\n  onMonthSelect?: (date: DateStringValue) => void;\n}\n\nexport type MonthPickerFactory = Factory<{\n  props: MonthPickerProps;\n  ref: HTMLDivElement;\n  stylesNames: MonthPickerStylesNames;\n  vars: MonthPickerCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<MonthPickerFactory>((_, { size }) => ({\n  monthPickerRoot: {\n    '--preset-font-size': getFontSize(size),\n  },\n}));\n\nconst defaultProps = {\n  type: 'default',\n} satisfies Partial<MonthPickerProps>;\n\ntype MonthPickerComponent = (<Type extends DatePickerType = 'default'>(\n  props: MonthPickerProps<Type> & { ref?: React.Ref<HTMLDivElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerFactory>;\n\nexport const MonthPicker: MonthPickerComponent = factory<MonthPickerFactory>((_props) => {\n  const props = useProps('MonthPicker', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    vars,\n    type,\n    defaultValue,\n    value,\n    onChange,\n    __staticSelector,\n    getMonthControlProps,\n    allowSingleDateInRange,\n    allowDeselect,\n    onMouseLeave,\n    onMonthSelect,\n    __updateDateOnMonthSelect,\n    __onPresetSelect,\n    __stopPropagation,\n    presets,\n    className,\n    style,\n    unstyled,\n    size,\n    attributes,\n    onLevelChange,\n    ...rest\n  } = props;\n\n  const { calendarProps, others } = pickCalendarProps(rest);\n  const setDateRef = useRef<((date: DateValue) => void) | null>(null);\n  const setLevelRef = useRef<((level: CalendarLevel) => void) | null>(null);\n\n  const getStyles = useStyles<MonthPickerFactory>({\n    name: __staticSelector || 'MonthPicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: presets ? 'monthPickerRoot' : undefined,\n    varsResolver,\n    vars,\n  });\n\n  const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } =\n    useDatesState({\n      type: type as any,\n      level: 'month',\n      allowDeselect,\n      allowSingleDateInRange,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      onMouseLeave,\n    });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const calendar = (\n    <Calendar\n      classNames={resolvedClassNames}\n      styles={resolvedStyles}\n      size={size}\n      {...calendarProps}\n      {...(!presets ? others : {})}\n      minLevel=\"year\"\n      __updateDateOnMonthSelect={__updateDateOnMonthSelect ?? false}\n      __staticSelector={__staticSelector || 'MonthPicker'}\n      onMouseLeave={onRootMouseLeave}\n      onMonthMouseEnter={(_event, date) => onHoveredDateChange(date)}\n      onMonthSelect={(date) => {\n        onDateChange(date);\n        onMonthSelect?.(date);\n      }}\n      getMonthControlProps={(date) => ({\n        ...getControlProps(date),\n        ...getMonthControlProps?.(date),\n      })}\n      onLevelChange={onLevelChange as any}\n      __setDateRef={setDateRef}\n      __setLevelRef={setLevelRef}\n      __stopPropagation={__stopPropagation}\n      attributes={attributes}\n      {...(!presets ? { className, style } : {})}\n    />\n  );\n\n  if (!presets) {\n    return calendar;\n  }\n\n  const handlePresetSelect = (\n    val: DateStringValue | null | [DateStringValue | null, DateStringValue | null]\n  ) => {\n    const _val = Array.isArray(val) ? val[0] : val;\n    if (_val !== undefined) {\n      setDateRef.current?.(_val);\n      setLevelRef.current?.('year');\n      __onPresetSelect ? __onPresetSelect(_val) : setValue(val);\n    }\n  };\n\n  const presetButtons = presets.map((preset, index) => (\n    <UnstyledButton\n      key={index}\n      {...getStyles('presetButton')}\n      onClick={() => handlePresetSelect(preset.value)}\n      onMouseDown={(event) => event.preventDefault()}\n      data-mantine-stop-propagation={__stopPropagation || undefined}\n    >\n      {preset.label}\n    </UnstyledButton>\n  ));\n\n  return (\n    <Box {...getStyles('monthPickerRoot')} size={size} {...others}>\n      <div {...getStyles('presetsList')}>{presetButtons}</div>\n      {calendar}\n    </Box>\n  );\n}) as any;\n\nMonthPicker.classes = { ...Calendar.classes, ...classes };\nMonthPicker.varsResolver = varsResolver;\nMonthPicker.displayName = '@mantine/dates/MonthPicker';\n\nexport namespace MonthPicker {\n  export type Props<Type extends DatePickerType = 'default'> = MonthPickerProps<Type>;\n  export type StylesNames = MonthPickerStylesNames;\n  export type Factory = MonthPickerFactory;\n}\n"],"mappings":";;;;;;;;;AAmGA,MAAM,eAAe,oBAAwC,GAAG,EAAE,YAAY,EAC5E,iBAAiB,EACf,sBAAsB,YAAY,KAAK,EACxC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,cAAoC,SAA6B,WAAW;CACvF,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,QACA,MACA,MACA,cACA,OACA,UACA,kBACA,sBACA,wBACA,eACA,cACA,eACA,2BACA,kBACA,mBACA,SACA,WACA,OACA,UACA,MACA,YACA,eACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CACzD,MAAM,aAAa,OAA2C,KAAK;CACnE,MAAM,cAAc,OAAgD,KAAK;CAEzE,MAAM,YAAY,UAA8B;EAC9C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,oBAAoB,KAAA;EAC5C;EACA;EACD,CAAC;CAEF,MAAM,EAAE,cAAc,kBAAkB,qBAAqB,iBAAiB,aAC5E,cAAc;EACN;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAAyC;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,WACJ,oBAAC,UAAD;EACE,YAAY;EACZ,QAAQ;EACF;EACN,GAAI;EACJ,GAAK,CAAC,UAAU,SAAS,EAAE;EAC3B,UAAS;EACT,2BAA2B,6BAA6B;EACxD,kBAAkB,oBAAoB;EACtC,cAAc;EACd,oBAAoB,QAAQ,SAAS,oBAAoB,KAAK;EAC9D,gBAAgB,SAAS;AACvB,gBAAa,KAAK;AAClB,mBAAgB,KAAK;;EAEvB,uBAAuB,UAAU;GAC/B,GAAG,gBAAgB,KAAK;GACxB,GAAG,uBAAuB,KAAK;GAChC;EACc;EACf,cAAc;EACd,eAAe;EACI;EACP;EACZ,GAAK,CAAC,UAAU;GAAE;GAAW;GAAO,GAAG,EAAE;EACzC,CAAA;AAGJ,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,sBACJ,QACG;EACH,MAAM,OAAO,MAAM,QAAQ,IAAI,GAAG,IAAI,KAAK;AAC3C,MAAI,SAAS,KAAA,GAAW;AACtB,cAAW,UAAU,KAAK;AAC1B,eAAY,UAAU,OAAO;AAC7B,sBAAmB,iBAAiB,KAAK,GAAG,SAAS,IAAI;;;CAI7D,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,UACzC,oBAAC,gBAAD;EAEE,GAAI,UAAU,eAAe;EAC7B,eAAe,mBAAmB,OAAO,MAAM;EAC/C,cAAc,UAAU,MAAM,gBAAgB;EAC9C,iCAA+B,qBAAqB,KAAA;YAEnD,OAAO;EACO,EAPV,MAOU,CACjB;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,kBAAkB;EAAQ;EAAM,GAAI;YAAvD,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,cAAc;aAAG;GAAoB,CAAA,EACvD,SACG;;EAER;AAEF,YAAY,UAAU;CAAE,GAAG,SAAS;CAAS,GAAGA;CAAS;AACzD,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/MonthPicker/MonthPicker.module.mjs

@@ -0,0 +1,11 @@
+"use client";
+//#region packages/@mantine/dates/src/components/MonthPicker/MonthPicker.module.css
+var MonthPicker_module_default = {
+	"monthPickerRoot": "m_53c9e871",
+	"presetsList": "m_cccb8ff3",
+	"presetButton": "m_7b4fbf50"
+};
+//#endregion
+export { MonthPicker_module_default as default };
+
+//# sourceMappingURL=MonthPicker.module.mjs.map

package/esm/components/MonthPicker/MonthPicker.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthPicker.module.mjs","names":[],"sources":["../../../src/components/MonthPicker/MonthPicker.module.css"],"sourcesContent":[".monthPickerRoot {\n  display: flex;\n  font-size: var(--preset-font-size);\n}\n\n.presetsList {\n  display: flex;\n  flex-direction: column;\n  border-inline-end: 1px solid;\n  padding-inline-end: 0.5em;\n  margin-inline-end: 0.5em;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-5);\n  }\n}\n\n.presetButton {\n  padding: 0.52em 0.8em;\n  border-radius: var(--mantine-radius-default);\n  font-size: var(--preset-font-size);\n  white-space: nowrap;\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n}\n"],"mappings":""}

package/esm/components/MonthPickerInput/MonthPickerInput.mjs

@@ -17,7 +17,7 @@ const defaultProps = {
 };
 const MonthPickerInput = factory((_props) => {
 	const props = useProps("MonthPickerInput", defaultProps, _props);
-	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, attributes, ...rest } = props;
+	const { type, value, defaultValue, onChange, valueFormat, labelSeparator, locale, classNames, styles, unstyled, closeOnChange, size, variant, dropdownType, sortDates, minDate, maxDate, vars, valueFormatter, presets, attributes, ...rest } = props;
 	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
 		classNames,
 		styles,
@@ -75,6 +75,7 @@ const MonthPickerInput = factory((_props) => {
 			__stopPropagation: dropdownType === "popover",
 			minDate,
 			maxDate,
+			presets,
 			attributes
 		})
 	});

package/esm/components/MonthPickerInput/MonthPickerInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonthPickerInput.mjs","names":[],"sources":["../../../src/components/MonthPickerInput/MonthPickerInput.tsx"],"sourcesContent":["import {\n  __InputStylesNames,\n  BoxProps,\n  factory,\n  Factory,\n  InputVariant,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { MonthPicker, MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\n\nexport type MonthPickerInputStylesNames =\n  | __InputStylesNames\n  | 'placeholder'\n  | MonthPickerStylesNames;\n\nexport interface MonthPickerInputProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    DateInputSharedProps,\n    MonthPickerBaseProps<Type>,\n    StylesApiProps<MonthPickerInputFactory> {\n  /** `dayjs` format for input value @default \"MMMM YYYY\" */\n  valueFormat?: string;\n}\n\nexport type MonthPickerInputFactory = Factory<{\n  props: MonthPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: MonthPickerInputStylesNames;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n  size: 'sm',\n  valueFormat: 'MMMM YYYY',\n  closeOnChange: true,\n  sortDates: true,\n  dropdownType: 'popover',\n} satisfies Partial<MonthPickerInputProps>;\n\ntype MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n  props: MonthPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerInputFactory>;\n\nexport const MonthPickerInput: MonthPickerInputComponent = factory<MonthPickerInputFactory>(\n  (_props) => {\n    const props = useProps('MonthPickerInput', defaultProps, _props);\n    const {\n      type,\n      value,\n      defaultValue,\n      onChange,\n      valueFormat,\n      labelSeparator,\n      locale,\n      classNames,\n      styles,\n      unstyled,\n      closeOnChange,\n      size,\n      variant,\n      dropdownType,\n      sortDates,\n      minDate,\n      maxDate,\n      vars,\n      valueFormatter,\n      attributes,\n      ...rest\n    } = props;\n\n    const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerInputFactory>({\n      classNames,\n      styles,\n      props,\n    });\n\n    const { calendarProps, others } = pickCalendarProps(rest);\n\n    const {\n      _value,\n      setValue,\n      formattedValue,\n      dropdownHandlers,\n      dropdownOpened,\n      onClear,\n      shouldClear,\n    } = useDatesInput({\n      type: type as any,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      locale,\n      format: valueFormat,\n      labelSeparator,\n      closeOnChange,\n      sortDates,\n      valueFormatter,\n    });\n\n    return (\n      <PickerInputBase\n        formattedValue={formattedValue}\n        dropdownOpened={dropdownOpened}\n        dropdownHandlers={dropdownHandlers}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        onClear={onClear}\n        shouldClear={shouldClear}\n        value={_value}\n        size={size}\n        variant={variant}\n        dropdownType={dropdownType}\n        {...others}\n        attributes={attributes}\n        type={type as any}\n        __staticSelector=\"MonthPickerInput\"\n      >\n        <MonthPicker\n          {...calendarProps}\n          size={size}\n          variant={variant}\n          type={type}\n          value={_value}\n          defaultDate={\n            calendarProps.defaultDate ||\n            (Array.isArray(_value)\n              ? _value[0] || getDefaultClampedDate({ maxDate, minDate })\n              : _value || getDefaultClampedDate({ maxDate, minDate }))\n          }\n          onChange={setValue}\n          locale={locale}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          __staticSelector=\"MonthPickerInput\"\n          __stopPropagation={dropdownType === 'popover'}\n          minDate={minDate}\n          maxDate={maxDate}\n          attributes={attributes}\n        />\n      </PickerInputBase>\n    );\n  }\n) as any;\n\nMonthPickerInput.classes = { ...PickerInputBase.classes, ...MonthPicker.classes };\nMonthPickerInput.displayName = '@mantine/dates/MonthPickerInput';\n\nexport namespace MonthPickerInput {\n  export type Props<Type extends DatePickerType = 'default'> = MonthPickerInputProps<Type>;\n  export type StylesNames = MonthPickerInputStylesNames;\n  export type Factory = MonthPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAA8C,SACxD,WAAW;CACV,MAAM,QAAQ,SAAS,oBAAoB,cAAc,OAAO;CAChE,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAA8C;EAC3F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACE,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACQ;EACN;EACN,kBAAiB;YAEjB,oBAAC,aAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAM,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAU,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,iBAAiB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,YAAY;CAAS;AACjF,iBAAiB,cAAc"}
+{"version":3,"file":"MonthPickerInput.mjs","names":[],"sources":["../../../src/components/MonthPickerInput/MonthPickerInput.tsx"],"sourcesContent":["import {\n  __InputStylesNames,\n  BoxProps,\n  factory,\n  Factory,\n  InputVariant,\n  MantineComponentStaticProperties,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDatesInput } from '../../hooks';\nimport { DatePickerType } from '../../types';\nimport { getDefaultClampedDate } from '../../utils';\nimport { pickCalendarProps } from '../Calendar';\nimport { MonthPicker, MonthPickerBaseProps, MonthPickerStylesNames } from '../MonthPicker';\nimport { DateInputSharedProps, PickerInputBase } from '../PickerInputBase';\n\nexport type MonthPickerInputStylesNames =\n  | __InputStylesNames\n  | 'placeholder'\n  | MonthPickerStylesNames;\n\nexport interface MonthPickerInputProps<Type extends DatePickerType = 'default'>\n  extends\n    BoxProps,\n    DateInputSharedProps,\n    MonthPickerBaseProps<Type>,\n    StylesApiProps<MonthPickerInputFactory> {\n  /** `dayjs` format for input value @default \"MMMM YYYY\" */\n  valueFormat?: string;\n}\n\nexport type MonthPickerInputFactory = Factory<{\n  props: MonthPickerInputProps;\n  ref: HTMLButtonElement;\n  stylesNames: MonthPickerInputStylesNames;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  type: 'default',\n  size: 'sm',\n  valueFormat: 'MMMM YYYY',\n  closeOnChange: true,\n  sortDates: true,\n  dropdownType: 'popover',\n} satisfies Partial<MonthPickerInputProps>;\n\ntype MonthPickerInputComponent = (<Type extends DatePickerType = 'default'>(\n  props: MonthPickerInputProps<Type> & { ref?: React.Ref<HTMLButtonElement> }\n) => React.JSX.Element) & {\n  displayName?: string;\n} & MantineComponentStaticProperties<MonthPickerInputFactory>;\n\nexport const MonthPickerInput: MonthPickerInputComponent = factory<MonthPickerInputFactory>(\n  (_props) => {\n    const props = useProps('MonthPickerInput', defaultProps, _props);\n    const {\n      type,\n      value,\n      defaultValue,\n      onChange,\n      valueFormat,\n      labelSeparator,\n      locale,\n      classNames,\n      styles,\n      unstyled,\n      closeOnChange,\n      size,\n      variant,\n      dropdownType,\n      sortDates,\n      minDate,\n      maxDate,\n      vars,\n      valueFormatter,\n      presets,\n      attributes,\n      ...rest\n    } = props;\n\n    const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MonthPickerInputFactory>({\n      classNames,\n      styles,\n      props,\n    });\n\n    const { calendarProps, others } = pickCalendarProps(rest);\n\n    const {\n      _value,\n      setValue,\n      formattedValue,\n      dropdownHandlers,\n      dropdownOpened,\n      onClear,\n      shouldClear,\n    } = useDatesInput({\n      type: type as any,\n      value,\n      defaultValue,\n      onChange: onChange as any,\n      locale,\n      format: valueFormat,\n      labelSeparator,\n      closeOnChange,\n      sortDates,\n      valueFormatter,\n    });\n\n    return (\n      <PickerInputBase\n        formattedValue={formattedValue}\n        dropdownOpened={dropdownOpened}\n        dropdownHandlers={dropdownHandlers}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        unstyled={unstyled}\n        onClear={onClear}\n        shouldClear={shouldClear}\n        value={_value}\n        size={size}\n        variant={variant}\n        dropdownType={dropdownType}\n        {...others}\n        attributes={attributes}\n        type={type as any}\n        __staticSelector=\"MonthPickerInput\"\n      >\n        <MonthPicker\n          {...calendarProps}\n          size={size}\n          variant={variant}\n          type={type}\n          value={_value}\n          defaultDate={\n            calendarProps.defaultDate ||\n            (Array.isArray(_value)\n              ? _value[0] || getDefaultClampedDate({ maxDate, minDate })\n              : _value || getDefaultClampedDate({ maxDate, minDate }))\n          }\n          onChange={setValue}\n          locale={locale}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          unstyled={unstyled}\n          __staticSelector=\"MonthPickerInput\"\n          __stopPropagation={dropdownType === 'popover'}\n          minDate={minDate}\n          maxDate={maxDate}\n          presets={presets}\n          attributes={attributes}\n        />\n      </PickerInputBase>\n    );\n  }\n) as any;\n\nMonthPickerInput.classes = { ...PickerInputBase.classes, ...MonthPicker.classes };\nMonthPickerInput.displayName = '@mantine/dates/MonthPickerInput';\n\nexport namespace MonthPickerInput {\n  export type Props<Type extends DatePickerType = 'default'> = MonthPickerInputProps<Type>;\n  export type StylesNames = MonthPickerInputStylesNames;\n  export type Factory = MonthPickerInputFactory;\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,eAAe;CACnB,MAAM;CACN,MAAM;CACN,aAAa;CACb,eAAe;CACf,WAAW;CACX,cAAc;CACf;AAQD,MAAa,mBAA8C,SACxD,WAAW;CACV,MAAM,QAAQ,SAAS,oBAAoB,cAAc,OAAO;CAChE,MAAM,EACJ,MACA,OACA,cACA,UACA,aACA,gBACA,QACA,YACA,QACA,UACA,eACA,MACA,SACA,cACA,WACA,SACA,SACA,MACA,gBACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,EAAE,oBAAoB,mBAAmB,qBAA8C;EAC3F;EACA;EACA;EACD,CAAC;CAEF,MAAM,EAAE,eAAe,WAAW,kBAAkB,KAAK;CAEzD,MAAM,EACJ,QACA,UACA,gBACA,kBACA,gBACA,SACA,gBACE,cAAc;EACV;EACN;EACA;EACU;EACV;EACA,QAAQ;EACR;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,iBAAD;EACkB;EACA;EACE;EAClB,YAAY;EACZ,QAAQ;EACE;EACD;EACI;EACb,OAAO;EACD;EACG;EACK;EACd,GAAI;EACQ;EACN;EACN,kBAAiB;YAEjB,oBAAC,aAAD;GACE,GAAI;GACE;GACG;GACH;GACN,OAAO;GACP,aACE,cAAc,gBACb,MAAM,QAAQ,OAAO,GAClB,OAAO,MAAM,sBAAsB;IAAE;IAAS;IAAS,CAAC,GACxD,UAAU,sBAAsB;IAAE;IAAS;IAAS,CAAC;GAE3D,UAAU;GACF;GACR,YAAY;GACZ,QAAQ;GACE;GACV,kBAAiB;GACjB,mBAAmB,iBAAiB;GAC3B;GACA;GACA;GACG;GACZ,CAAA;EACc,CAAA;EAGvB;AAED,iBAAiB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,YAAY;CAAS;AACjF,iBAAiB,cAAc"}

package/esm/components/SpinInput/SpinInput.mjs

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { clamp } from "@mantine/hooks";
 //#region packages/@mantine/dates/src/components/SpinInput/SpinInput.tsx
 const getMaxDigit = (max) => Number(max.toFixed(0)[0]);
-function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero = false, placeholder = "--", ...others }) {
+function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero = false, placeholder = "--", disableAutoAdvance = false, ...others }) {
 	const maxDigit = getMaxDigit(max);
 	const arrowsMax = max + 1 - step;
 	const handleChange = (value) => {
@@ -14,7 +14,7 @@ function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, on
 			const parsedValue = parseInt(clearValue, 10);
 			const clampedValue = allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);
 			onChange(clampedValue);
-			if (clampedValue > maxDigit || value.startsWith("00")) onNextInput?.();
+			if (!disableAutoAdvance && (clampedValue > maxDigit || value.startsWith("00"))) onNextInput?.();
 		}
 	};
 	const handleKeyDown = (event) => {

package/esm/components/SpinInput/SpinInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpinInput.mjs","names":[],"sources":["../../../src/components/SpinInput/SpinInput.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../TimePicker/utils/pad-time/pad-time';\n\ninterface SpinInputProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'value'> {\n  value: number | null;\n  min: number;\n  max: number;\n  onChange: (value: number | null) => void;\n  focusable: boolean;\n  step: number;\n  onNextInput?: () => void;\n  onPreviousInput?: () => void;\n  allowTemporaryZero?: boolean;\n  placeholder?: string;\n}\n\nconst getMaxDigit = (max: number) => Number(max.toFixed(0)[0]);\n\nexport function SpinInput({\n  value,\n  min,\n  max,\n  onChange,\n  focusable,\n  step,\n  onNextInput,\n  onPreviousInput,\n  onFocus,\n  readOnly,\n  allowTemporaryZero = false,\n  placeholder = '--',\n  ...others\n}: SpinInputProps) {\n  const maxDigit = getMaxDigit(max);\n  const arrowsMax = max + 1 - step;\n\n  const handleChange = (value: string) => {\n    if (readOnly) {\n      return;\n    }\n\n    const clearValue = value.replace(/\\D/g, '');\n    if (clearValue !== '') {\n      const parsedValue = parseInt(clearValue, 10);\n      const clampedValue =\n        allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);\n\n      onChange(clampedValue);\n\n      if (clampedValue > maxDigit || value.startsWith('00')) {\n        onNextInput?.();\n      }\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      return;\n    }\n\n    if (event.key === '0' || event.key === 'Num0') {\n      if (value === 0) {\n        event.preventDefault();\n        onNextInput?.();\n      }\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      onChange(min);\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      onChange(max);\n    }\n\n    if (event.key === 'Backspace' || event.key === 'Delete') {\n      event.preventDefault();\n\n      if (value !== null) {\n        onChange(null);\n      } else {\n        onPreviousInput?.();\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      onNextInput?.();\n    }\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      onPreviousInput?.();\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const newValue = value === null ? min : clamp(value + step, min, arrowsMax);\n      onChange(newValue);\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const newValue = value === null ? arrowsMax : clamp(value - step, min, arrowsMax);\n      onChange(newValue);\n    }\n  };\n\n  return (\n    <input\n      type=\"text\"\n      role=\"spinbutton\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value === null ? 0 : value}\n      data-empty={value === null || undefined}\n      inputMode=\"numeric\"\n      placeholder={placeholder}\n      value={value === null ? '' : padTime(value)}\n      onChange={(event) => handleChange(event.currentTarget.value)}\n      onKeyDown={handleKeyDown}\n      onFocus={(event) => {\n        event.currentTarget.select();\n        onFocus?.(event);\n      }}\n      onClick={(event) => {\n        event.stopPropagation();\n        event.currentTarget.select();\n      }}\n      onMouseDown={(event) => event.stopPropagation()}\n      {...others}\n    />\n  );\n}\n\nSpinInput.displayName = '@mantine/dates/SpinInput';\n"],"mappings":";;;;;AAgBA,MAAM,eAAe,QAAgB,OAAO,IAAI,QAAQ,EAAE,CAAC,GAAG;AAE9D,SAAgB,UAAU,EACxB,OACA,KACA,KACA,UACA,WACA,MACA,aACA,iBACA,SACA,UACA,qBAAqB,OACrB,cAAc,MACd,GAAG,UACc;CACjB,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,YAAY,MAAM,IAAI;CAE5B,MAAM,gBAAgB,UAAkB;AACtC,MAAI,SACF;EAGF,MAAM,aAAa,MAAM,QAAQ,OAAO,GAAG;AAC3C,MAAI,eAAe,IAAI;GACrB,MAAM,cAAc,SAAS,YAAY,GAAG;GAC5C,MAAM,eACJ,sBAAsB,gBAAgB,KAAK,MAAM,IAAI,IAAI,MAAM,aAAa,KAAK,IAAI;AAEvF,YAAS,aAAa;AAEtB,OAAI,eAAe,YAAY,MAAM,WAAW,KAAK,CACnD,gBAAe;;;CAKrB,MAAM,iBAAiB,UAAiD;AACtE,MAAI,SACF;AAGF,MAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ;OACjC,UAAU,GAAG;AACf,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,MAAI,MAAM,QAAQ,QAAQ;AACxB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,OAAO;AACvB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AACvD,SAAM,gBAAgB;AAEtB,OAAI,UAAU,KACZ,UAAS,KAAK;OAEd,oBAAmB;;AAIvB,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,kBAAe;;AAGjB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AACtB,sBAAmB;;AAGrB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,MAAM,MAAM,QAAQ,MAAM,KAAK,UAAU,CACzD;;AAGpB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,YAAY,MAAM,QAAQ,MAAM,KAAK,UAAU,CAC/D;;;AAItB,QACE,oBAAC,SAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,UAAU,OAAO,IAAI;EACpC,cAAY,UAAU,QAAQ,KAAA;EAC9B,WAAU;EACG;EACb,OAAO,UAAU,OAAO,KAAK,QAAQ,MAAM;EAC3C,WAAW,UAAU,aAAa,MAAM,cAAc,MAAM;EAC5D,WAAW;EACX,UAAU,UAAU;AAClB,SAAM,cAAc,QAAQ;AAC5B,aAAU,MAAM;;EAElB,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,cAAc,QAAQ;;EAE9B,cAAc,UAAU,MAAM,iBAAiB;EAC/C,GAAI;EACJ,CAAA;;AAIN,UAAU,cAAc"}
+{"version":3,"file":"SpinInput.mjs","names":[],"sources":["../../../src/components/SpinInput/SpinInput.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport { padTime } from '../TimePicker/utils/pad-time/pad-time';\n\ninterface SpinInputProps extends Omit<React.ComponentProps<'input'>, 'onChange' | 'value'> {\n  value: number | null;\n  min: number;\n  max: number;\n  onChange: (value: number | null) => void;\n  focusable: boolean;\n  step: number;\n  onNextInput?: () => void;\n  onPreviousInput?: () => void;\n  allowTemporaryZero?: boolean;\n  placeholder?: string;\n  disableAutoAdvance?: boolean;\n}\n\nconst getMaxDigit = (max: number) => Number(max.toFixed(0)[0]);\n\nexport function SpinInput({\n  value,\n  min,\n  max,\n  onChange,\n  focusable,\n  step,\n  onNextInput,\n  onPreviousInput,\n  onFocus,\n  readOnly,\n  allowTemporaryZero = false,\n  placeholder = '--',\n  disableAutoAdvance = false,\n  ...others\n}: SpinInputProps) {\n  const maxDigit = getMaxDigit(max);\n  const arrowsMax = max + 1 - step;\n\n  const handleChange = (value: string) => {\n    if (readOnly) {\n      return;\n    }\n\n    const clearValue = value.replace(/\\D/g, '');\n    if (clearValue !== '') {\n      const parsedValue = parseInt(clearValue, 10);\n      const clampedValue =\n        allowTemporaryZero && parsedValue === 0 && min > 0 ? 0 : clamp(parsedValue, min, max);\n\n      onChange(clampedValue);\n\n      if (!disableAutoAdvance && (clampedValue > maxDigit || value.startsWith('00'))) {\n        onNextInput?.();\n      }\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      return;\n    }\n\n    if (event.key === '0' || event.key === 'Num0') {\n      if (value === 0) {\n        event.preventDefault();\n        onNextInput?.();\n      }\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      onChange(min);\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      onChange(max);\n    }\n\n    if (event.key === 'Backspace' || event.key === 'Delete') {\n      event.preventDefault();\n\n      if (value !== null) {\n        onChange(null);\n      } else {\n        onPreviousInput?.();\n      }\n    }\n\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      onNextInput?.();\n    }\n\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      onPreviousInput?.();\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      const newValue = value === null ? min : clamp(value + step, min, arrowsMax);\n      onChange(newValue);\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      const newValue = value === null ? arrowsMax : clamp(value - step, min, arrowsMax);\n      onChange(newValue);\n    }\n  };\n\n  return (\n    <input\n      type=\"text\"\n      role=\"spinbutton\"\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={value === null ? 0 : value}\n      data-empty={value === null || undefined}\n      inputMode=\"numeric\"\n      placeholder={placeholder}\n      value={value === null ? '' : padTime(value)}\n      onChange={(event) => handleChange(event.currentTarget.value)}\n      onKeyDown={handleKeyDown}\n      onFocus={(event) => {\n        event.currentTarget.select();\n        onFocus?.(event);\n      }}\n      onClick={(event) => {\n        event.stopPropagation();\n        event.currentTarget.select();\n      }}\n      onMouseDown={(event) => event.stopPropagation()}\n      {...others}\n    />\n  );\n}\n\nSpinInput.displayName = '@mantine/dates/SpinInput';\n"],"mappings":";;;;;AAiBA,MAAM,eAAe,QAAgB,OAAO,IAAI,QAAQ,EAAE,CAAC,GAAG;AAE9D,SAAgB,UAAU,EACxB,OACA,KACA,KACA,UACA,WACA,MACA,aACA,iBACA,SACA,UACA,qBAAqB,OACrB,cAAc,MACd,qBAAqB,OACrB,GAAG,UACc;CACjB,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,YAAY,MAAM,IAAI;CAE5B,MAAM,gBAAgB,UAAkB;AACtC,MAAI,SACF;EAGF,MAAM,aAAa,MAAM,QAAQ,OAAO,GAAG;AAC3C,MAAI,eAAe,IAAI;GACrB,MAAM,cAAc,SAAS,YAAY,GAAG;GAC5C,MAAM,eACJ,sBAAsB,gBAAgB,KAAK,MAAM,IAAI,IAAI,MAAM,aAAa,KAAK,IAAI;AAEvF,YAAS,aAAa;AAEtB,OAAI,CAAC,uBAAuB,eAAe,YAAY,MAAM,WAAW,KAAK,EAC3E,gBAAe;;;CAKrB,MAAM,iBAAiB,UAAiD;AACtE,MAAI,SACF;AAGF,MAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ;OACjC,UAAU,GAAG;AACf,UAAM,gBAAgB;AACtB,mBAAe;;;AAInB,MAAI,MAAM,QAAQ,QAAQ;AACxB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,OAAO;AACvB,SAAM,gBAAgB;AACtB,YAAS,IAAI;;AAGf,MAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAU;AACvD,SAAM,gBAAgB;AAEtB,OAAI,UAAU,KACZ,UAAS,KAAK;OAEd,oBAAmB;;AAIvB,MAAI,MAAM,QAAQ,cAAc;AAC9B,SAAM,gBAAgB;AACtB,kBAAe;;AAGjB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AACtB,sBAAmB;;AAGrB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,MAAM,MAAM,QAAQ,MAAM,KAAK,UAAU,CACzD;;AAGpB,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;AAEtB,YADiB,UAAU,OAAO,YAAY,MAAM,QAAQ,MAAM,KAAK,UAAU,CAC/D;;;AAItB,QACE,oBAAC,SAAD;EACE,MAAK;EACL,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe,UAAU,OAAO,IAAI;EACpC,cAAY,UAAU,QAAQ,KAAA;EAC9B,WAAU;EACG;EACb,OAAO,UAAU,OAAO,KAAK,QAAQ,MAAM;EAC3C,WAAW,UAAU,aAAa,MAAM,cAAc,MAAM;EAC5D,WAAW;EACX,UAAU,UAAU;AAClB,SAAM,cAAc,QAAQ;AAC5B,aAAU,MAAM;;EAElB,UAAU,UAAU;AAClB,SAAM,iBAAiB;AACvB,SAAM,cAAc,QAAQ;;EAE9B,cAAc,UAAU,MAAM,iBAAiB;EAC/C,GAAI;EACJ,CAAA;;AAIN,UAAU,cAAc"}

package/esm/components/TimePicker/TimePicker.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { padTime } from "./utils/pad-time/pad-time.mjs";
 import { SpinInput } from "../SpinInput/SpinInput.mjs";
 import { TimePickerProvider } from "./TimePicker.context.mjs";
 import { AmPmInput } from "./AmPmInput/AmPmInput.mjs";
@@ -16,6 +17,7 @@ import { CloseButton, InputBase, Popover, createVarsResolver, factory, getFontSi
 import { useId, useMergedRef } from "@mantine/hooks";
 //#region packages/@mantine/dates/src/components/TimePicker/TimePicker.tsx
 const defaultProps = {
+	type: "time",
 	hoursStep: 1,
 	minutesStep: 1,
 	secondsStep: 1,
@@ -28,12 +30,16 @@ const defaultProps = {
 	maxDropdownContentHeight: 200,
 	hoursPlaceholder: "--",
 	minutesPlaceholder: "--",
-	secondsPlaceholder: "--"
+	secondsPlaceholder: "--",
+	minHoursDigits: 2
 };
 const varsResolver = createVarsResolver((_theme, { size }) => ({ dropdown: { "--control-font-size": getFontSize(size) } }));
 const TimePicker = factory((_props) => {
 	const props = useProps("TimePicker", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, onClick, format, value, defaultValue, onChange, hoursStep, minutesStep, secondsStep, withSeconds, hoursInputLabel, minutesInputLabel, secondsInputLabel, amPmInputLabel, amPmLabels, clearable, clearSectionMode, onMouseDown, onFocusCapture, onBlurCapture, min, max, popoverProps, withDropdown, rightSection, onFocus, onBlur, clearButtonProps, hoursInputProps, minutesInputProps, secondsInputProps, amPmSelectProps, readOnly, disabled, size, name, form, hiddenInputProps, labelProps, pasteSplit, hoursRef, minutesRef, secondsRef, amPmRef, presets, maxDropdownContentHeight, scrollAreaProps, attributes, reverseTimeControlsList, hoursPlaceholder, minutesPlaceholder, secondsPlaceholder, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, onClick, type, format: _format, value, defaultValue, onChange, hoursStep, minutesStep, secondsStep, withSeconds, hoursInputLabel, minutesInputLabel, secondsInputLabel, amPmInputLabel, amPmLabels, clearable, clearSectionMode, onMouseDown, onFocusCapture, onBlurCapture, min, max, popoverProps, withDropdown, rightSection, onFocus, onBlur, clearButtonProps, hoursInputProps, minutesInputProps, secondsInputProps, amPmSelectProps, readOnly, disabled, size, name, form, hiddenInputProps, labelProps, pasteSplit, hoursRef, minutesRef, secondsRef, amPmRef, presets, maxDropdownContentHeight, scrollAreaProps, attributes, reverseTimeControlsList, hoursPlaceholder, minutesPlaceholder, secondsPlaceholder, minHoursDigits, ...others } = props;
+	const isDuration = type === "duration";
+	const format = isDuration ? "24h" : _format;
+	const resolvedHoursPlaceholder = isDuration && hoursPlaceholder === "--" ? "-".repeat(minHoursDigits) : hoursPlaceholder;
 	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
 		classNames,
 		styles,
@@ -64,7 +70,8 @@ const TimePicker = factory((_props) => {
 		clearable,
 		disabled,
 		readOnly,
-		pasteSplit
+		pasteSplit,
+		type
 	});
 	const _hoursRef = useMergedRef(controller.refs.hours, hoursRef);
 	const _minutesRef = useMergedRef(controller.refs.minutes, minutesRef);
@@ -107,7 +114,7 @@ const TimePicker = factory((_props) => {
 			transitionProps: { duration: 0 },
 			position: "bottom-start",
 			withRoles: false,
-			disabled: disabled || readOnly || !withDropdown,
+			disabled: disabled || readOnly || !withDropdown || isDuration,
 			...popoverProps,
 			children: [/* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsxs(InputBase, {
 				component: "div",
@@ -167,14 +174,18 @@ const TimePicker = factory((_props) => {
 								...hoursInputProps,
 								...getStyles("field", {
 									className: hoursInputProps?.className,
-									style: hoursInputProps?.style
+									style: isDuration ? {
+										width: `calc(${Math.max(minHoursDigits, padTime(controller.values.hours ?? 0).length)}ch + 0.3em)`,
+										...hoursInputProps?.style
+									} : hoursInputProps?.style
 								}),
 								value: controller.values.hours,
 								onChange: controller.setHours,
 								onNextInput: () => controller.focus("minutes"),
 								min: format === "12h" ? 1 : 0,
-								max: format === "12h" ? 12 : 23,
+								max: isDuration ? 9999 : format === "12h" ? 12 : 23,
 								allowTemporaryZero: format === "12h",
+								disableAutoAdvance: isDuration,
 								focusable: true,
 								step: hoursStep,
 								ref: _hoursRef,
@@ -191,7 +202,7 @@ const TimePicker = factory((_props) => {
 									if (format === "12h" && (actualInputValue ? parseInt(actualInputValue, 10) : null) === 0) controller.setHours(12);
 									hoursInputProps?.onBlur?.(event);
 								},
-								placeholder: hoursPlaceholder
+								placeholder: resolvedHoursPlaceholder
 							}),
 							/* @__PURE__ */ jsx("span", { children: ":" }),
 							/* @__PURE__ */ jsx(SpinInput, {
@@ -246,7 +257,7 @@ const TimePicker = factory((_props) => {
 								},
 								placeholder: secondsPlaceholder
 							})] }),
-							format === "12h" && /* @__PURE__ */ jsx(AmPmInput, {
+							format === "12h" && !isDuration && /* @__PURE__ */ jsx(AmPmInput, {
 								...amPmSelectProps,
 								inputType: withDropdown ? "input" : "select",
 								labels: amPmLabels,