@mantine/dates 9.0.1 → 9.1.0

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,

package/esm/components/TimePicker/TimePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.mjs","names":["classes"],"sources":["../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  BoxProps,\n  ClearSectionMode,\n  CloseButton,\n  CloseButtonProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  InputBase,\n  InputVariant,\n  Popover,\n  PopoverProps,\n  ScrollAreaProps,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport { SpinInput } from '../SpinInput';\nimport { AmPmInput } from './AmPmInput/AmPmInput';\nimport { AmPmControlsList } from './TimeControlsList/AmPmControlsList';\nimport { TimeControlsList } from './TimeControlsList/TimeControlsList';\nimport { TimePickerProvider } from './TimePicker.context';\nimport {\n  TimePickerAmPmLabels,\n  TimePickerFormat,\n  TimePickerPasteSplit,\n  TimePickerPresets,\n} from './TimePicker.types';\nimport { TimePresets } from './TimePresets/TimePresets';\nimport { useTimePicker } from './use-time-picker';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\nimport classes from './TimePicker.module.css';\n\nexport type TimePickerStylesNames =\n  | 'fieldsRoot'\n  | 'fieldsGroup'\n  | 'field'\n  | 'controlsList'\n  | 'controlsListGroup'\n  | 'control'\n  | 'dropdown'\n  | 'presetsRoot'\n  | 'presetsGroup'\n  | 'presetsGroupLabel'\n  | 'presetControl'\n  | 'scrollarea'\n  | __InputStylesNames;\n\nexport type TimePickerCssVariables = {\n  dropdown: '--control-font-size';\n};\n\nexport interface TimePickerProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TimePickerFactory>,\n    ElementProps<'div', 'onChange' | 'defaultValue'> {\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when the value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the clear button should be displayed @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** `name` prop passed down to the hidden input */\n  name?: string;\n\n  /** `form` prop passed down to the hidden input */\n  form?: string;\n\n  /** Min possible time value in `hh:mm:ss` format */\n  min?: string;\n\n  /** Max possible time value in `hh:mm:ss` format */\n  max?: string;\n\n  /** Time format, `'24h'` by default */\n  format?: TimePickerFormat;\n\n  /** Number by which hours are incremented/decremented @default 1 */\n  hoursStep?: number;\n\n  /** Number by which minutes are incremented/decremented @default 1 */\n  minutesStep?: number;\n\n  /** Number by which seconds are incremented/decremented @default 1 */\n  secondsStep?: number;\n\n  /** Determines whether the seconds input should be displayed @default false */\n  withSeconds?: boolean;\n\n  /** `aria-label` of hours input */\n  hoursInputLabel?: string;\n\n  /** `aria-label` of minutes input */\n  minutesInputLabel?: string;\n\n  /** `aria-label` of seconds input */\n  secondsInputLabel?: string;\n\n  /** `aria-label` of am/pm input */\n  amPmInputLabel?: string;\n\n  /** Labels used for am/pm values @default { am: 'AM', pm: 'PM' } */\n  amPmLabels?: TimePickerAmPmLabels;\n\n  /** Determines whether the dropdown with time controls list should be visible when the input has focus @default false */\n  withDropdown?: boolean;\n\n  /** Props passed down to `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n  /** Called once when the focus is no longer on any of the inputs */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  /** Props passed down to clear button */\n  clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;\n\n  /** Props passed down to hours input */\n  hoursInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to minutes input */\n  minutesInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to seconds input */\n  secondsInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to am/pm select */\n  amPmSelectProps?: React.ComponentProps<'select'> & DataAttributes;\n\n  /** If set, the value cannot be updated */\n  readOnly?: boolean;\n\n  /** If set, the component becomes disabled */\n  disabled?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** A function to transform paste values, by default time in 24h format can be parsed on paste for example `23:34:22` */\n  pasteSplit?: TimePickerPasteSplit;\n\n  /** A ref object to get node reference of the hours input */\n  hoursRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the minutes input */\n  minutesRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the seconds input */\n  secondsRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the am/pm select */\n  amPmRef?: React.Ref<HTMLSelectElement>;\n\n  /** Time presets to display in the dropdown */\n  presets?: TimePickerPresets;\n\n  /** Maximum height of the content displayed in the dropdown in px @default 200 */\n  maxDropdownContentHeight?: number;\n\n  /** Props passed down to all underlying `ScrollArea` components */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the time controls list are reversed, @default false */\n  reverseTimeControlsList?: boolean;\n\n  /** Hours input placeholder, @default -- */\n  hoursPlaceholder?: string;\n\n  /** Minutes input placeholder, @default -- */\n  minutesPlaceholder?: string;\n\n  /** Seconds input placeholder, @default -- */\n  secondsPlaceholder?: string;\n}\n\nexport type TimePickerFactory = Factory<{\n  props: TimePickerProps;\n  ref: HTMLDivElement;\n  stylesNames: TimePickerStylesNames;\n  vars: TimePickerCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  hoursStep: 1,\n  minutesStep: 1,\n  secondsStep: 1,\n  format: '24h',\n  amPmLabels: { am: 'AM', pm: 'PM' },\n  pasteSplit: getParsedTime,\n  maxDropdownContentHeight: 200,\n  hoursPlaceholder: '--',\n  minutesPlaceholder: '--',\n  secondsPlaceholder: '--',\n} satisfies Partial<TimePickerProps>;\n\nconst varsResolver = createVarsResolver<TimePickerFactory>((_theme, { size }) => ({\n  dropdown: {\n    '--control-font-size': getFontSize(size),\n  },\n}));\n\nexport const TimePicker = factory<TimePickerFactory>((_props) => {\n  const props = useProps('TimePicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onClick,\n    format,\n    value,\n    defaultValue,\n    onChange,\n    hoursStep,\n    minutesStep,\n    secondsStep,\n    withSeconds,\n    hoursInputLabel,\n    minutesInputLabel,\n    secondsInputLabel,\n    amPmInputLabel,\n    amPmLabels,\n    clearable,\n    clearSectionMode,\n    onMouseDown,\n    onFocusCapture,\n    onBlurCapture,\n    min,\n    max,\n    popoverProps,\n    withDropdown,\n    rightSection,\n    onFocus,\n    onBlur,\n    clearButtonProps,\n    hoursInputProps,\n    minutesInputProps,\n    secondsInputProps,\n    amPmSelectProps,\n    readOnly,\n    disabled,\n    size,\n    name,\n    form,\n    hiddenInputProps,\n    labelProps,\n    pasteSplit,\n    hoursRef,\n    minutesRef,\n    secondsRef,\n    amPmRef,\n    presets,\n    maxDropdownContentHeight,\n    scrollAreaProps,\n    attributes,\n    reverseTimeControlsList,\n    hoursPlaceholder,\n    minutesPlaceholder,\n    secondsPlaceholder,\n    ...others\n  } = props;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TimePickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<TimePickerFactory>({\n    name: 'TimePicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const controller = useTimePicker({\n    value,\n    defaultValue,\n    onChange,\n    format,\n    amPmLabels,\n    withSeconds,\n    min,\n    max,\n    clearable,\n    disabled,\n    readOnly,\n    pasteSplit,\n  });\n\n  const _hoursRef = useMergedRef(controller.refs.hours, hoursRef);\n  const _minutesRef = useMergedRef(controller.refs.minutes, minutesRef);\n  const _secondsRef = useMergedRef(controller.refs.seconds, secondsRef);\n  const _amPmRef = useMergedRef(controller.refs.amPm, amPmRef);\n\n  const hoursInputId = useId();\n  const hasFocusRef = useRef(false);\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n\n  const handleFocus = (event: React.FocusEvent<any>) => {\n    if (!hasFocusRef.current) {\n      hasFocusRef.current = true;\n      onFocus?.(event);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget)) {\n      const computedValue = controller.values;\n      const timeString = getTimeString({\n        ...computedValue,\n        format,\n        amPmLabels,\n        withSeconds: !!withSeconds,\n      });\n\n      if (timeString.valid && (min || max)) {\n        const clamped = clampTime(timeString.value, min, max);\n\n        if (clamped.timeString !== timeString.value) {\n          controller.setTimeString(clamped.timeString);\n        }\n      }\n      hasFocusRef.current = false;\n      onBlur?.(event);\n    }\n  };\n\n  return (\n    <TimePickerProvider value={{ getStyles, scrollAreaProps, maxDropdownContentHeight }}>\n      <Popover\n        opened={dropdownOpened}\n        transitionProps={{ duration: 0 }}\n        position=\"bottom-start\"\n        withRoles={false}\n        disabled={disabled || readOnly || !withDropdown}\n        {...popoverProps}\n      >\n        <Popover.Target>\n          <InputBase\n            component=\"div\"\n            size={size}\n            disabled={disabled}\n            onClick={(event) => {\n              onClick?.(event);\n              controller.focus('hours');\n            }}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              onMouseDown?.(event);\n            }}\n            onFocusCapture={(event) => {\n              setDropdownOpened(true);\n              onFocusCapture?.(event);\n            }}\n            onBlurCapture={(event) => {\n              setDropdownOpened(false);\n              onBlurCapture?.(event);\n            }}\n            rightSection={rightSection}\n            __clearSection={\n              <CloseButton\n                {...clearButtonProps}\n                size={size}\n                onClick={(event) => {\n                  controller.clear();\n                  clearButtonProps?.onClick?.(event);\n                }}\n                onMouseDown={(event) => {\n                  event.preventDefault();\n                  clearButtonProps?.onMouseDown?.(event);\n                }}\n              />\n            }\n            __clearable={controller.isClearable}\n            __clearSectionMode={clearSectionMode}\n            labelProps={{ htmlFor: hoursInputId, ...labelProps }}\n            style={style}\n            className={className}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            attributes={attributes}\n            __staticSelector=\"TimePicker\"\n            {...others}\n          >\n            <div {...getStyles('fieldsRoot')} dir=\"ltr\">\n              <div {...getStyles('fieldsGroup')} onBlur={handleBlur}>\n                <SpinInput\n                  id={hoursInputId}\n                  {...hoursInputProps}\n                  {...getStyles('field', {\n                    className: hoursInputProps?.className,\n                    style: hoursInputProps?.style,\n                  })}\n                  value={controller.values.hours}\n                  onChange={controller.setHours}\n                  onNextInput={() => controller.focus('minutes')}\n                  min={format === '12h' ? 1 : 0}\n                  max={format === '12h' ? 12 : 23}\n                  allowTemporaryZero={format === '12h'}\n                  focusable\n                  step={hoursStep}\n                  ref={_hoursRef}\n                  aria-label={hoursInputLabel}\n                  readOnly={readOnly}\n                  disabled={disabled}\n                  onPaste={controller.onPaste}\n                  onFocus={(event) => {\n                    handleFocus(event);\n                    hoursInputProps?.onFocus?.(event);\n                  }}\n                  onBlur={(event) => {\n                    const actualInputValue = event.currentTarget.value;\n                    const numericValue = actualInputValue ? parseInt(actualInputValue, 10) : null;\n\n                    if (format === '12h' && numericValue === 0) {\n                      controller.setHours(12);\n                    }\n                    hoursInputProps?.onBlur?.(event);\n                  }}\n                  placeholder={hoursPlaceholder}\n                />\n                <span>:</span>\n                <SpinInput\n                  {...minutesInputProps}\n                  {...getStyles('field', {\n                    className: minutesInputProps?.className,\n                    style: minutesInputProps?.style,\n                  })}\n                  value={controller.values.minutes}\n                  onChange={controller.setMinutes}\n                  min={0}\n                  max={59}\n                  focusable\n                  step={minutesStep}\n                  ref={_minutesRef}\n                  onPreviousInput={() => controller.focus('hours')}\n                  onNextInput={() =>\n                    withSeconds ? controller.focus('seconds') : controller.focus('amPm')\n                  }\n                  aria-label={minutesInputLabel}\n                  tabIndex={-1}\n                  readOnly={readOnly}\n                  disabled={disabled}\n                  onPaste={controller.onPaste}\n                  onFocus={(event) => {\n                    handleFocus(event);\n                    minutesInputProps?.onFocus?.(event);\n                  }}\n                  placeholder={minutesPlaceholder}\n                />\n\n                {withSeconds && (\n                  <>\n                    <span>:</span>\n                    <SpinInput\n                      {...secondsInputProps}\n                      {...getStyles('field', {\n                        className: secondsInputProps?.className,\n                        style: secondsInputProps?.style,\n                      })}\n                      value={controller.values.seconds}\n                      onChange={controller.setSeconds}\n                      min={0}\n                      max={59}\n                      focusable\n                      step={secondsStep}\n                      ref={_secondsRef}\n                      onPreviousInput={() => controller.focus('minutes')}\n                      onNextInput={() => controller.focus('amPm')}\n                      aria-label={secondsInputLabel}\n                      tabIndex={-1}\n                      readOnly={readOnly}\n                      disabled={disabled}\n                      onPaste={controller.onPaste}\n                      onFocus={(event) => {\n                        handleFocus(event);\n                        secondsInputProps?.onFocus?.(event);\n                      }}\n                      placeholder={secondsPlaceholder}\n                    />\n                  </>\n                )}\n\n                {format === '12h' && (\n                  <AmPmInput\n                    {...amPmSelectProps}\n                    inputType={withDropdown ? 'input' : 'select'}\n                    labels={amPmLabels}\n                    value={controller.values.amPm}\n                    onChange={controller.setAmPm}\n                    ref={_amPmRef}\n                    aria-label={amPmInputLabel}\n                    onPreviousInput={() =>\n                      withSeconds ? controller.focus('seconds') : controller.focus('minutes')\n                    }\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    tabIndex={-1}\n                    onPaste={controller.onPaste}\n                    onFocus={(event) => {\n                      handleFocus(event);\n                      amPmSelectProps?.onFocus?.(event);\n                    }}\n                  />\n                )}\n              </div>\n            </div>\n\n            <input\n              type=\"hidden\"\n              name={name}\n              form={form}\n              value={controller.hiddenInputValue}\n              {...hiddenInputProps}\n            />\n          </InputBase>\n        </Popover.Target>\n        <Popover.Dropdown\n          {...getStyles('dropdown')}\n          onMouseDown={(event) => event.preventDefault()}\n        >\n          {presets ? (\n            <TimePresets\n              value={controller.hiddenInputValue}\n              onChange={controller.setTimeString}\n              format={format}\n              presets={presets}\n              amPmLabels={amPmLabels}\n              withSeconds={withSeconds || false}\n            />\n          ) : (\n            <div {...getStyles('controlsListGroup')}>\n              <TimeControlsList\n                min={format === '12h' ? 1 : 0}\n                max={format === '12h' ? 12 : 23}\n                step={hoursStep}\n                value={controller.values.hours}\n                onSelect={controller.setHours}\n                reversed={reverseTimeControlsList}\n              />\n              <TimeControlsList\n                min={0}\n                max={59}\n                step={minutesStep}\n                value={controller.values.minutes}\n                onSelect={controller.setMinutes}\n                reversed={reverseTimeControlsList}\n              />\n              {withSeconds && (\n                <TimeControlsList\n                  min={0}\n                  max={59}\n                  step={secondsStep}\n                  value={controller.values.seconds}\n                  onSelect={controller.setSeconds}\n                  reversed={reverseTimeControlsList}\n                />\n              )}\n              {format === '12h' && (\n                <AmPmControlsList\n                  labels={amPmLabels}\n                  value={controller.values.amPm}\n                  onSelect={controller.setAmPm}\n                />\n              )}\n            </div>\n          )}\n        </Popover.Dropdown>\n      </Popover>\n    </TimePickerProvider>\n  );\n});\n\nTimePicker.displayName = '@mantine/dates/TimePicker';\nTimePicker.classes = classes;\nTimePicker.varsResolver = varsResolver;\n\nexport namespace TimePicker {\n  export type Props = TimePickerProps;\n  export type StylesNames = TimePickerStylesNames;\n  export type Factory = TimePickerFactory;\n  export type CssVariables = TimePickerCssVariables;\n  export type Format = TimePickerFormat;\n  export type AmPmLabels = TimePickerAmPmLabels;\n  export type PasteSplit = TimePickerPasteSplit;\n  export type Presets = TimePickerPresets;\n}\n"],"mappings":"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"}
+{"version":3,"file":"TimePicker.mjs","names":["classes"],"sources":["../../../src/components/TimePicker/TimePicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport {\n  __BaseInputProps,\n  __InputStylesNames,\n  BoxProps,\n  ClearSectionMode,\n  CloseButton,\n  CloseButtonProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  factory,\n  Factory,\n  getFontSize,\n  InputBase,\n  InputVariant,\n  Popover,\n  PopoverProps,\n  ScrollAreaProps,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { useId, useMergedRef } from '@mantine/hooks';\nimport { SpinInput } from '../SpinInput';\nimport { AmPmInput } from './AmPmInput/AmPmInput';\nimport { AmPmControlsList } from './TimeControlsList/AmPmControlsList';\nimport { TimeControlsList } from './TimeControlsList/TimeControlsList';\nimport { TimePickerProvider } from './TimePicker.context';\nimport {\n  TimePickerAmPmLabels,\n  TimePickerFormat,\n  TimePickerPasteSplit,\n  TimePickerPresets,\n  TimePickerType,\n} from './TimePicker.types';\nimport { TimePresets } from './TimePresets/TimePresets';\nimport { useTimePicker } from './use-time-picker';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\nimport { padTime } from './utils/pad-time/pad-time';\nimport classes from './TimePicker.module.css';\n\nexport type TimePickerStylesNames =\n  | 'fieldsRoot'\n  | 'fieldsGroup'\n  | 'field'\n  | 'controlsList'\n  | 'controlsListGroup'\n  | 'control'\n  | 'dropdown'\n  | 'presetsRoot'\n  | 'presetsGroup'\n  | 'presetsGroupLabel'\n  | 'presetControl'\n  | 'scrollarea'\n  | __InputStylesNames;\n\nexport type TimePickerCssVariables = {\n  dropdown: '--control-font-size';\n};\n\nexport interface TimePickerProps\n  extends\n    BoxProps,\n    __BaseInputProps,\n    StylesApiProps<TimePickerFactory>,\n    ElementProps<'div', 'onChange' | 'defaultValue'> {\n  /** TimePicker type, `'time'` for regular time input, `'duration'` for duration input that allows values greater than 24 hours @default 'time' */\n  type?: TimePickerType;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when the value changes */\n  onChange?: (value: string) => void;\n\n  /** Determines whether the clear button should be displayed @default false */\n  clearable?: boolean;\n\n  /** Determines how the clear button and rightSection are rendered @default 'both' */\n  clearSectionMode?: ClearSectionMode;\n\n  /** `name` prop passed down to the hidden input */\n  name?: string;\n\n  /** `form` prop passed down to the hidden input */\n  form?: string;\n\n  /** Min possible time value in `hh:mm:ss` format */\n  min?: string;\n\n  /** Max possible time value in `hh:mm:ss` format */\n  max?: string;\n\n  /** Time format, `'24h'` by default */\n  format?: TimePickerFormat;\n\n  /** Number by which hours are incremented/decremented @default 1 */\n  hoursStep?: number;\n\n  /** Number by which minutes are incremented/decremented @default 1 */\n  minutesStep?: number;\n\n  /** Number by which seconds are incremented/decremented @default 1 */\n  secondsStep?: number;\n\n  /** Determines whether the seconds input should be displayed @default false */\n  withSeconds?: boolean;\n\n  /** `aria-label` of hours input */\n  hoursInputLabel?: string;\n\n  /** `aria-label` of minutes input */\n  minutesInputLabel?: string;\n\n  /** `aria-label` of seconds input */\n  secondsInputLabel?: string;\n\n  /** `aria-label` of am/pm input */\n  amPmInputLabel?: string;\n\n  /** Labels used for am/pm values @default { am: 'AM', pm: 'PM' } */\n  amPmLabels?: TimePickerAmPmLabels;\n\n  /** Determines whether the dropdown with time controls list should be visible when the input has focus @default false */\n  withDropdown?: boolean;\n\n  /** Props passed down to `Popover` component */\n  popoverProps?: PopoverProps;\n\n  /** Called once when one of the inputs is focused, not called when focused is shifted between hours, minutes, seconds and am/pm inputs */\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n  /** Called once when the focus is no longer on any of the inputs */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  /** Props passed down to clear button */\n  clearButtonProps?: CloseButtonProps & ElementProps<'button'> & DataAttributes;\n\n  /** Props passed down to hours input */\n  hoursInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to minutes input */\n  minutesInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to seconds input */\n  secondsInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Props passed down to am/pm select */\n  amPmSelectProps?: React.ComponentProps<'select'> & DataAttributes;\n\n  /** If set, the value cannot be updated */\n  readOnly?: boolean;\n\n  /** If set, the component becomes disabled */\n  disabled?: boolean;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** A function to transform paste values, by default time in 24h format can be parsed on paste for example `23:34:22` */\n  pasteSplit?: TimePickerPasteSplit;\n\n  /** A ref object to get node reference of the hours input */\n  hoursRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the minutes input */\n  minutesRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the seconds input */\n  secondsRef?: React.Ref<HTMLInputElement>;\n\n  /** A ref object to get node reference of the am/pm select */\n  amPmRef?: React.Ref<HTMLSelectElement>;\n\n  /** Time presets to display in the dropdown */\n  presets?: TimePickerPresets;\n\n  /** Maximum height of the content displayed in the dropdown in px @default 200 */\n  maxDropdownContentHeight?: number;\n\n  /** Props passed down to all underlying `ScrollArea` components */\n  scrollAreaProps?: ScrollAreaProps;\n\n  /** If set, the time controls list are reversed, @default false */\n  reverseTimeControlsList?: boolean;\n\n  /** Hours input placeholder, @default -- */\n  hoursPlaceholder?: string;\n\n  /** Minutes input placeholder, @default -- */\n  minutesPlaceholder?: string;\n\n  /** Seconds input placeholder, @default -- */\n  secondsPlaceholder?: string;\n\n  /** Minimum number of digits displayed in the hours input, applicable only when `type=\"duration\"` is set @default 2 */\n  minHoursDigits?: number;\n}\n\nexport type TimePickerFactory = Factory<{\n  props: TimePickerProps;\n  ref: HTMLDivElement;\n  stylesNames: TimePickerStylesNames;\n  vars: TimePickerCssVariables;\n  variant: InputVariant;\n}>;\n\nconst defaultProps = {\n  type: 'time',\n  hoursStep: 1,\n  minutesStep: 1,\n  secondsStep: 1,\n  format: '24h',\n  amPmLabels: { am: 'AM', pm: 'PM' },\n  pasteSplit: getParsedTime,\n  maxDropdownContentHeight: 200,\n  hoursPlaceholder: '--',\n  minutesPlaceholder: '--',\n  secondsPlaceholder: '--',\n  minHoursDigits: 2,\n} satisfies Partial<TimePickerProps>;\n\nconst varsResolver = createVarsResolver<TimePickerFactory>((_theme, { size }) => ({\n  dropdown: {\n    '--control-font-size': getFontSize(size),\n  },\n}));\n\nexport const TimePicker = factory<TimePickerFactory>((_props) => {\n  const props = useProps('TimePicker', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    onClick,\n    type,\n    format: _format,\n    value,\n    defaultValue,\n    onChange,\n    hoursStep,\n    minutesStep,\n    secondsStep,\n    withSeconds,\n    hoursInputLabel,\n    minutesInputLabel,\n    secondsInputLabel,\n    amPmInputLabel,\n    amPmLabels,\n    clearable,\n    clearSectionMode,\n    onMouseDown,\n    onFocusCapture,\n    onBlurCapture,\n    min,\n    max,\n    popoverProps,\n    withDropdown,\n    rightSection,\n    onFocus,\n    onBlur,\n    clearButtonProps,\n    hoursInputProps,\n    minutesInputProps,\n    secondsInputProps,\n    amPmSelectProps,\n    readOnly,\n    disabled,\n    size,\n    name,\n    form,\n    hiddenInputProps,\n    labelProps,\n    pasteSplit,\n    hoursRef,\n    minutesRef,\n    secondsRef,\n    amPmRef,\n    presets,\n    maxDropdownContentHeight,\n    scrollAreaProps,\n    attributes,\n    reverseTimeControlsList,\n    hoursPlaceholder,\n    minutesPlaceholder,\n    secondsPlaceholder,\n    minHoursDigits,\n    ...others\n  } = props;\n\n  const isDuration = type === 'duration';\n  const format = isDuration ? '24h' : _format!;\n  const resolvedHoursPlaceholder =\n    isDuration && hoursPlaceholder === '--' ? '-'.repeat(minHoursDigits!) : hoursPlaceholder;\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TimePickerFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const getStyles = useStyles<TimePickerFactory>({\n    name: 'TimePicker',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const controller = useTimePicker({\n    value,\n    defaultValue,\n    onChange,\n    format,\n    amPmLabels,\n    withSeconds,\n    min,\n    max,\n    clearable,\n    disabled,\n    readOnly,\n    pasteSplit,\n    type: type!,\n  });\n\n  const _hoursRef = useMergedRef(controller.refs.hours, hoursRef);\n  const _minutesRef = useMergedRef(controller.refs.minutes, minutesRef);\n  const _secondsRef = useMergedRef(controller.refs.seconds, secondsRef);\n  const _amPmRef = useMergedRef(controller.refs.amPm, amPmRef);\n\n  const hoursInputId = useId();\n  const hasFocusRef = useRef(false);\n  const [dropdownOpened, setDropdownOpened] = useState(false);\n\n  const handleFocus = (event: React.FocusEvent<any>) => {\n    if (!hasFocusRef.current) {\n      hasFocusRef.current = true;\n      onFocus?.(event);\n    }\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {\n    if (!event.currentTarget.contains(event.relatedTarget)) {\n      const computedValue = controller.values;\n      const timeString = getTimeString({\n        ...computedValue,\n        format,\n        amPmLabels,\n        withSeconds: !!withSeconds,\n      });\n\n      if (timeString.valid && (min || max)) {\n        const clamped = clampTime(timeString.value, min, max);\n\n        if (clamped.timeString !== timeString.value) {\n          controller.setTimeString(clamped.timeString);\n        }\n      }\n      hasFocusRef.current = false;\n      onBlur?.(event);\n    }\n  };\n\n  return (\n    <TimePickerProvider value={{ getStyles, scrollAreaProps, maxDropdownContentHeight }}>\n      <Popover\n        opened={dropdownOpened}\n        transitionProps={{ duration: 0 }}\n        position=\"bottom-start\"\n        withRoles={false}\n        disabled={disabled || readOnly || !withDropdown || isDuration}\n        {...popoverProps}\n      >\n        <Popover.Target>\n          <InputBase\n            component=\"div\"\n            size={size}\n            disabled={disabled}\n            onClick={(event) => {\n              onClick?.(event);\n              controller.focus('hours');\n            }}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              onMouseDown?.(event);\n            }}\n            onFocusCapture={(event) => {\n              setDropdownOpened(true);\n              onFocusCapture?.(event);\n            }}\n            onBlurCapture={(event) => {\n              setDropdownOpened(false);\n              onBlurCapture?.(event);\n            }}\n            rightSection={rightSection}\n            __clearSection={\n              <CloseButton\n                {...clearButtonProps}\n                size={size}\n                onClick={(event) => {\n                  controller.clear();\n                  clearButtonProps?.onClick?.(event);\n                }}\n                onMouseDown={(event) => {\n                  event.preventDefault();\n                  clearButtonProps?.onMouseDown?.(event);\n                }}\n              />\n            }\n            __clearable={controller.isClearable}\n            __clearSectionMode={clearSectionMode}\n            labelProps={{ htmlFor: hoursInputId, ...labelProps }}\n            style={style}\n            className={className}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            attributes={attributes}\n            __staticSelector=\"TimePicker\"\n            {...others}\n          >\n            <div {...getStyles('fieldsRoot')} dir=\"ltr\">\n              <div {...getStyles('fieldsGroup')} onBlur={handleBlur}>\n                <SpinInput\n                  id={hoursInputId}\n                  {...hoursInputProps}\n                  {...getStyles('field', {\n                    className: hoursInputProps?.className,\n                    style: isDuration\n                      ? {\n                          width: `calc(${Math.max(minHoursDigits!, padTime(controller.values.hours ?? 0).length)}ch + 0.3em)`,\n                          ...hoursInputProps?.style,\n                        }\n                      : hoursInputProps?.style,\n                  })}\n                  value={controller.values.hours}\n                  onChange={controller.setHours}\n                  onNextInput={() => controller.focus('minutes')}\n                  min={format === '12h' ? 1 : 0}\n                  max={isDuration ? 9999 : format === '12h' ? 12 : 23}\n                  allowTemporaryZero={format === '12h'}\n                  disableAutoAdvance={isDuration}\n                  focusable\n                  step={hoursStep}\n                  ref={_hoursRef}\n                  aria-label={hoursInputLabel}\n                  readOnly={readOnly}\n                  disabled={disabled}\n                  onPaste={controller.onPaste}\n                  onFocus={(event) => {\n                    handleFocus(event);\n                    hoursInputProps?.onFocus?.(event);\n                  }}\n                  onBlur={(event) => {\n                    const actualInputValue = event.currentTarget.value;\n                    const numericValue = actualInputValue ? parseInt(actualInputValue, 10) : null;\n\n                    if (format === '12h' && numericValue === 0) {\n                      controller.setHours(12);\n                    }\n                    hoursInputProps?.onBlur?.(event);\n                  }}\n                  placeholder={resolvedHoursPlaceholder}\n                />\n                <span>:</span>\n                <SpinInput\n                  {...minutesInputProps}\n                  {...getStyles('field', {\n                    className: minutesInputProps?.className,\n                    style: minutesInputProps?.style,\n                  })}\n                  value={controller.values.minutes}\n                  onChange={controller.setMinutes}\n                  min={0}\n                  max={59}\n                  focusable\n                  step={minutesStep}\n                  ref={_minutesRef}\n                  onPreviousInput={() => controller.focus('hours')}\n                  onNextInput={() =>\n                    withSeconds ? controller.focus('seconds') : controller.focus('amPm')\n                  }\n                  aria-label={minutesInputLabel}\n                  tabIndex={-1}\n                  readOnly={readOnly}\n                  disabled={disabled}\n                  onPaste={controller.onPaste}\n                  onFocus={(event) => {\n                    handleFocus(event);\n                    minutesInputProps?.onFocus?.(event);\n                  }}\n                  placeholder={minutesPlaceholder}\n                />\n\n                {withSeconds && (\n                  <>\n                    <span>:</span>\n                    <SpinInput\n                      {...secondsInputProps}\n                      {...getStyles('field', {\n                        className: secondsInputProps?.className,\n                        style: secondsInputProps?.style,\n                      })}\n                      value={controller.values.seconds}\n                      onChange={controller.setSeconds}\n                      min={0}\n                      max={59}\n                      focusable\n                      step={secondsStep}\n                      ref={_secondsRef}\n                      onPreviousInput={() => controller.focus('minutes')}\n                      onNextInput={() => controller.focus('amPm')}\n                      aria-label={secondsInputLabel}\n                      tabIndex={-1}\n                      readOnly={readOnly}\n                      disabled={disabled}\n                      onPaste={controller.onPaste}\n                      onFocus={(event) => {\n                        handleFocus(event);\n                        secondsInputProps?.onFocus?.(event);\n                      }}\n                      placeholder={secondsPlaceholder}\n                    />\n                  </>\n                )}\n\n                {format === '12h' && !isDuration && (\n                  <AmPmInput\n                    {...amPmSelectProps}\n                    inputType={withDropdown ? 'input' : 'select'}\n                    labels={amPmLabels}\n                    value={controller.values.amPm}\n                    onChange={controller.setAmPm}\n                    ref={_amPmRef}\n                    aria-label={amPmInputLabel}\n                    onPreviousInput={() =>\n                      withSeconds ? controller.focus('seconds') : controller.focus('minutes')\n                    }\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    tabIndex={-1}\n                    onPaste={controller.onPaste}\n                    onFocus={(event) => {\n                      handleFocus(event);\n                      amPmSelectProps?.onFocus?.(event);\n                    }}\n                  />\n                )}\n              </div>\n            </div>\n\n            <input\n              type=\"hidden\"\n              name={name}\n              form={form}\n              value={controller.hiddenInputValue}\n              {...hiddenInputProps}\n            />\n          </InputBase>\n        </Popover.Target>\n        <Popover.Dropdown\n          {...getStyles('dropdown')}\n          onMouseDown={(event) => event.preventDefault()}\n        >\n          {presets ? (\n            <TimePresets\n              value={controller.hiddenInputValue}\n              onChange={controller.setTimeString}\n              format={format}\n              presets={presets}\n              amPmLabels={amPmLabels}\n              withSeconds={withSeconds || false}\n            />\n          ) : (\n            <div {...getStyles('controlsListGroup')}>\n              <TimeControlsList\n                min={format === '12h' ? 1 : 0}\n                max={format === '12h' ? 12 : 23}\n                step={hoursStep}\n                value={controller.values.hours}\n                onSelect={controller.setHours}\n                reversed={reverseTimeControlsList}\n              />\n              <TimeControlsList\n                min={0}\n                max={59}\n                step={minutesStep}\n                value={controller.values.minutes}\n                onSelect={controller.setMinutes}\n                reversed={reverseTimeControlsList}\n              />\n              {withSeconds && (\n                <TimeControlsList\n                  min={0}\n                  max={59}\n                  step={secondsStep}\n                  value={controller.values.seconds}\n                  onSelect={controller.setSeconds}\n                  reversed={reverseTimeControlsList}\n                />\n              )}\n              {format === '12h' && (\n                <AmPmControlsList\n                  labels={amPmLabels}\n                  value={controller.values.amPm}\n                  onSelect={controller.setAmPm}\n                />\n              )}\n            </div>\n          )}\n        </Popover.Dropdown>\n      </Popover>\n    </TimePickerProvider>\n  );\n});\n\nTimePicker.displayName = '@mantine/dates/TimePicker';\nTimePicker.classes = classes;\nTimePicker.varsResolver = varsResolver;\n\nexport namespace TimePicker {\n  export type Props = TimePickerProps;\n  export type StylesNames = TimePickerStylesNames;\n  export type Factory = TimePickerFactory;\n  export type CssVariables = TimePickerCssVariables;\n  export type Format = TimePickerFormat;\n  export type AmPmLabels = TimePickerAmPmLabels;\n  export type PasteSplit = TimePickerPasteSplit;\n  export type Presets = TimePickerPresets;\n}\n"],"mappings":"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"}

package/esm/components/TimePicker/use-time-picker.mjs

@@ -5,7 +5,7 @@ import { getTimeString } from "./utils/get-time-string/get-time-string.mjs";
 import { useRef, useState } from "react";
 import { useDidUpdate } from "@mantine/hooks";
 //#region packages/@mantine/dates/src/components/TimePicker/use-time-picker.ts
-function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds = false, min, max, clearable, readOnly, disabled, pasteSplit }) {
+function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds = false, min, max, clearable, readOnly, disabled, pasteSplit, type }) {
 	const parsedTime = getParsedTime({
 		time: value || defaultValue || "",
 		amPmLabels,
@@ -131,7 +131,8 @@ function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, with
 		});
 		if (timeString.valid) {
 			acceptChange.current = false;
-			const clamped = clampTime(timeString.value, min || "00:00:00", max || "23:59:59");
+			const defaultMax = type === "duration" ? "9999:59:59" : "23:59:59";
+			const clamped = clampTime(timeString.value, min || "00:00:00", max || defaultMax);
 			onChange?.(clamped.timeString);
 			setHours(parsedTime.hours);
 			setMinutes(parsedTime.minutes);

package/esm/components/TimePicker/use-time-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-time-picker.mjs","names":[],"sources":["../../../src/components/TimePicker/use-time-picker.ts"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport type {\n  TimePickerAmPmLabels,\n  TimePickerFormat,\n  TimePickerPasteSplit,\n} from './TimePicker.types';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\n\ninterface UseTimePickerInput {\n  value: string | undefined;\n  defaultValue: string | undefined;\n  onChange: ((value: string) => void) | undefined;\n  format: TimePickerFormat;\n  amPmLabels: TimePickerAmPmLabels;\n  withSeconds: boolean | undefined;\n  min: string | undefined;\n  max: string | undefined;\n  readOnly: boolean | undefined;\n  disabled: boolean | undefined;\n  clearable: boolean | undefined;\n  pasteSplit: TimePickerPasteSplit | undefined;\n}\n\nexport function useTimePicker({\n  value,\n  defaultValue,\n  onChange,\n  format,\n  amPmLabels,\n  withSeconds = false,\n  min,\n  max,\n  clearable,\n  readOnly,\n  disabled,\n  pasteSplit,\n}: UseTimePickerInput) {\n  const parsedTime = getParsedTime({\n    time: value || defaultValue || '',\n    amPmLabels,\n    format,\n  });\n\n  const initialTimeString = getTimeString({\n    hours: parsedTime.hours,\n    minutes: parsedTime.minutes,\n    seconds: parsedTime.seconds,\n    format,\n    withSeconds,\n    amPm: parsedTime.amPm,\n    amPmLabels,\n  });\n\n  const acceptChange = useRef(true);\n  const wasInvalidBefore = useRef(!initialTimeString.valid);\n\n  const [hours, setHours] = useState<number | null>(parsedTime.hours);\n  const [minutes, setMinutes] = useState<number | null>(parsedTime.minutes);\n  const [seconds, setSeconds] = useState<number | null>(parsedTime.seconds);\n  const [amPm, setAmPm] = useState<string | null>(parsedTime.amPm);\n\n  const isClearable =\n    clearable &&\n    !readOnly &&\n    !disabled &&\n    (hours !== null || minutes !== null || seconds !== null || amPm !== null);\n\n  const hoursRef = useRef<HTMLInputElement>(null);\n  const minutesRef = useRef<HTMLInputElement>(null);\n  const secondsRef = useRef<HTMLInputElement>(null);\n  const amPmRef = useRef<HTMLSelectElement>(null);\n\n  const focus = (field: 'hours' | 'minutes' | 'seconds' | 'amPm') => {\n    if (field === 'hours') {\n      hoursRef.current?.focus();\n    }\n\n    if (field === 'minutes') {\n      minutesRef.current?.focus();\n    }\n\n    if (field === 'seconds') {\n      secondsRef.current?.focus();\n    }\n\n    if (field === 'amPm') {\n      amPmRef.current?.focus();\n    }\n  };\n\n  const handleTimeChange = (field: 'hours' | 'minutes' | 'seconds' | 'amPm', val: any) => {\n    const computedValue = { hours, minutes, seconds, amPm, [field]: val };\n\n    const timeString = getTimeString({ ...computedValue, format, withSeconds, amPmLabels });\n\n    if (timeString.valid) {\n      acceptChange.current = false;\n      wasInvalidBefore.current = false;\n      if (field === 'hours') {\n        setHours(val);\n      }\n      if (field === 'minutes') {\n        setMinutes(val);\n      }\n      if (field === 'seconds') {\n        setSeconds(val);\n      }\n      if (field === 'amPm') {\n        setAmPm(val);\n      }\n\n      onChange?.(timeString.value);\n    } else {\n      acceptChange.current = false;\n      if (!wasInvalidBefore.current) {\n        onChange?.('');\n        wasInvalidBefore.current = true;\n      }\n    }\n  };\n\n  const setTimeString = (timeString: string) => {\n    acceptChange.current = false;\n\n    const parsedTime = getParsedTime({ time: timeString, amPmLabels, format });\n    setHours(parsedTime.hours);\n    setMinutes(parsedTime.minutes);\n    setSeconds(parsedTime.seconds);\n    setAmPm(parsedTime.amPm);\n\n    const next = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n    wasInvalidBefore.current = !next.valid;\n    onChange?.(timeString);\n  };\n\n  const onHoursChange = (value: number | null) => {\n    let adjustedValue = value;\n    if (format === '12h' && typeof value === 'number' && value > 12) {\n      adjustedValue = ((value - 1) % 12) + 1;\n    }\n\n    setHours(adjustedValue);\n    handleTimeChange('hours', adjustedValue);\n    focus('hours');\n  };\n\n  const onMinutesChange = (value: number | null) => {\n    setMinutes(value);\n    handleTimeChange('minutes', value);\n    focus('minutes');\n  };\n\n  const onSecondsChange = (value: number | null) => {\n    setSeconds(value);\n    handleTimeChange('seconds', value);\n    focus('seconds');\n  };\n\n  const onAmPmChange = (value: string | null) => {\n    setAmPm(value);\n    handleTimeChange('amPm', value);\n    focus('amPm');\n  };\n\n  const clear = () => {\n    acceptChange.current = false;\n    setHours(null);\n    setMinutes(null);\n    setSeconds(null);\n    setAmPm(null);\n    onChange?.('');\n    wasInvalidBefore.current = true;\n    focus('hours');\n  };\n\n  const onPaste = (event: React.ClipboardEvent<any>) => {\n    event.preventDefault();\n    const pastedValue = event.clipboardData.getData('text');\n    const parsedTime = (pasteSplit || getParsedTime)({ time: pastedValue, format, amPmLabels });\n    const timeString = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n    if (timeString.valid) {\n      acceptChange.current = false;\n      const clamped = clampTime(timeString.value, min || '00:00:00', max || '23:59:59');\n      onChange?.(clamped.timeString);\n      setHours(parsedTime.hours);\n      setMinutes(parsedTime.minutes);\n      setSeconds(parsedTime.seconds);\n      setAmPm(parsedTime.amPm);\n    }\n  };\n\n  const hiddenInputValue = getTimeString({\n    hours,\n    minutes,\n    seconds,\n    format,\n    withSeconds,\n    amPm,\n    amPmLabels: amPmLabels!,\n  });\n\n  useDidUpdate(() => {\n    if (value === '') {\n      acceptChange.current = false;\n      setHours(null);\n      setMinutes(null);\n      setSeconds(null);\n      setAmPm(null);\n      acceptChange.current = true;\n      return;\n    }\n\n    if (acceptChange.current && typeof value === 'string') {\n      const parsedTime = getParsedTime({ time: value || '', amPmLabels, format });\n      setHours(parsedTime.hours);\n      setMinutes(parsedTime.minutes);\n      setSeconds(parsedTime.seconds);\n      setAmPm(parsedTime.amPm);\n    }\n    acceptChange.current = true;\n  }, [value]);\n\n  return {\n    refs: { hours: hoursRef, minutes: minutesRef, seconds: secondsRef, amPm: amPmRef },\n    values: { hours, minutes, seconds, amPm },\n    setHours: onHoursChange,\n    setMinutes: onMinutesChange,\n    setSeconds: onSecondsChange,\n    setAmPm: onAmPmChange,\n    focus,\n    clear,\n    onPaste,\n    setTimeString,\n    isClearable,\n    hiddenInputValue: hiddenInputValue.value,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-time-picker.mjs","names":[],"sources":["../../../src/components/TimePicker/use-time-picker.ts"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate } from '@mantine/hooks';\nimport type {\n  TimePickerAmPmLabels,\n  TimePickerFormat,\n  TimePickerPasteSplit,\n  TimePickerType,\n} from './TimePicker.types';\nimport { clampTime } from './utils/clamp-time/clamp-time';\nimport { getParsedTime } from './utils/get-parsed-time/get-parsed-time';\nimport { getTimeString } from './utils/get-time-string/get-time-string';\n\ninterface UseTimePickerInput {\n  value: string | undefined;\n  defaultValue: string | undefined;\n  onChange: ((value: string) => void) | undefined;\n  format: TimePickerFormat;\n  amPmLabels: TimePickerAmPmLabels;\n  withSeconds: boolean | undefined;\n  min: string | undefined;\n  max: string | undefined;\n  readOnly: boolean | undefined;\n  disabled: boolean | undefined;\n  clearable: boolean | undefined;\n  pasteSplit: TimePickerPasteSplit | undefined;\n  type: TimePickerType;\n}\n\nexport function useTimePicker({\n  value,\n  defaultValue,\n  onChange,\n  format,\n  amPmLabels,\n  withSeconds = false,\n  min,\n  max,\n  clearable,\n  readOnly,\n  disabled,\n  pasteSplit,\n  type,\n}: UseTimePickerInput) {\n  const parsedTime = getParsedTime({\n    time: value || defaultValue || '',\n    amPmLabels,\n    format,\n  });\n\n  const initialTimeString = getTimeString({\n    hours: parsedTime.hours,\n    minutes: parsedTime.minutes,\n    seconds: parsedTime.seconds,\n    format,\n    withSeconds,\n    amPm: parsedTime.amPm,\n    amPmLabels,\n  });\n\n  const acceptChange = useRef(true);\n  const wasInvalidBefore = useRef(!initialTimeString.valid);\n\n  const [hours, setHours] = useState<number | null>(parsedTime.hours);\n  const [minutes, setMinutes] = useState<number | null>(parsedTime.minutes);\n  const [seconds, setSeconds] = useState<number | null>(parsedTime.seconds);\n  const [amPm, setAmPm] = useState<string | null>(parsedTime.amPm);\n\n  const isClearable =\n    clearable &&\n    !readOnly &&\n    !disabled &&\n    (hours !== null || minutes !== null || seconds !== null || amPm !== null);\n\n  const hoursRef = useRef<HTMLInputElement>(null);\n  const minutesRef = useRef<HTMLInputElement>(null);\n  const secondsRef = useRef<HTMLInputElement>(null);\n  const amPmRef = useRef<HTMLSelectElement>(null);\n\n  const focus = (field: 'hours' | 'minutes' | 'seconds' | 'amPm') => {\n    if (field === 'hours') {\n      hoursRef.current?.focus();\n    }\n\n    if (field === 'minutes') {\n      minutesRef.current?.focus();\n    }\n\n    if (field === 'seconds') {\n      secondsRef.current?.focus();\n    }\n\n    if (field === 'amPm') {\n      amPmRef.current?.focus();\n    }\n  };\n\n  const handleTimeChange = (field: 'hours' | 'minutes' | 'seconds' | 'amPm', val: any) => {\n    const computedValue = { hours, minutes, seconds, amPm, [field]: val };\n\n    const timeString = getTimeString({ ...computedValue, format, withSeconds, amPmLabels });\n\n    if (timeString.valid) {\n      acceptChange.current = false;\n      wasInvalidBefore.current = false;\n      if (field === 'hours') {\n        setHours(val);\n      }\n      if (field === 'minutes') {\n        setMinutes(val);\n      }\n      if (field === 'seconds') {\n        setSeconds(val);\n      }\n      if (field === 'amPm') {\n        setAmPm(val);\n      }\n\n      onChange?.(timeString.value);\n    } else {\n      acceptChange.current = false;\n      if (!wasInvalidBefore.current) {\n        onChange?.('');\n        wasInvalidBefore.current = true;\n      }\n    }\n  };\n\n  const setTimeString = (timeString: string) => {\n    acceptChange.current = false;\n\n    const parsedTime = getParsedTime({ time: timeString, amPmLabels, format });\n    setHours(parsedTime.hours);\n    setMinutes(parsedTime.minutes);\n    setSeconds(parsedTime.seconds);\n    setAmPm(parsedTime.amPm);\n\n    const next = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n    wasInvalidBefore.current = !next.valid;\n    onChange?.(timeString);\n  };\n\n  const onHoursChange = (value: number | null) => {\n    let adjustedValue = value;\n    if (format === '12h' && typeof value === 'number' && value > 12) {\n      adjustedValue = ((value - 1) % 12) + 1;\n    }\n\n    setHours(adjustedValue);\n    handleTimeChange('hours', adjustedValue);\n    focus('hours');\n  };\n\n  const onMinutesChange = (value: number | null) => {\n    setMinutes(value);\n    handleTimeChange('minutes', value);\n    focus('minutes');\n  };\n\n  const onSecondsChange = (value: number | null) => {\n    setSeconds(value);\n    handleTimeChange('seconds', value);\n    focus('seconds');\n  };\n\n  const onAmPmChange = (value: string | null) => {\n    setAmPm(value);\n    handleTimeChange('amPm', value);\n    focus('amPm');\n  };\n\n  const clear = () => {\n    acceptChange.current = false;\n    setHours(null);\n    setMinutes(null);\n    setSeconds(null);\n    setAmPm(null);\n    onChange?.('');\n    wasInvalidBefore.current = true;\n    focus('hours');\n  };\n\n  const onPaste = (event: React.ClipboardEvent<any>) => {\n    event.preventDefault();\n    const pastedValue = event.clipboardData.getData('text');\n    const parsedTime = (pasteSplit || getParsedTime)({ time: pastedValue, format, amPmLabels });\n    const timeString = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });\n    if (timeString.valid) {\n      acceptChange.current = false;\n      const defaultMax = type === 'duration' ? '9999:59:59' : '23:59:59';\n      const clamped = clampTime(timeString.value, min || '00:00:00', max || defaultMax);\n      onChange?.(clamped.timeString);\n      setHours(parsedTime.hours);\n      setMinutes(parsedTime.minutes);\n      setSeconds(parsedTime.seconds);\n      setAmPm(parsedTime.amPm);\n    }\n  };\n\n  const hiddenInputValue = getTimeString({\n    hours,\n    minutes,\n    seconds,\n    format,\n    withSeconds,\n    amPm,\n    amPmLabels: amPmLabels!,\n  });\n\n  useDidUpdate(() => {\n    if (value === '') {\n      acceptChange.current = false;\n      setHours(null);\n      setMinutes(null);\n      setSeconds(null);\n      setAmPm(null);\n      acceptChange.current = true;\n      return;\n    }\n\n    if (acceptChange.current && typeof value === 'string') {\n      const parsedTime = getParsedTime({ time: value || '', amPmLabels, format });\n      setHours(parsedTime.hours);\n      setMinutes(parsedTime.minutes);\n      setSeconds(parsedTime.seconds);\n      setAmPm(parsedTime.amPm);\n    }\n    acceptChange.current = true;\n  }, [value]);\n\n  return {\n    refs: { hours: hoursRef, minutes: minutesRef, seconds: secondsRef, amPm: amPmRef },\n    values: { hours, minutes, seconds, amPm },\n    setHours: onHoursChange,\n    setMinutes: onMinutesChange,\n    setSeconds: onSecondsChange,\n    setAmPm: onAmPmChange,\n    focus,\n    clear,\n    onPaste,\n    setTimeString,\n    isClearable,\n    hiddenInputValue: hiddenInputValue.value,\n  };\n}\n"],"mappings":"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"}

package/esm/components/YearPicker/YearPicker.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 YearPicker_module_default from "./YearPicker.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/YearPicker/YearPicker.tsx
+const varsResolver = createVarsResolver((_, { size }) => ({ yearPickerRoot: { "--preset-font-size": getFontSize(size) } }));
 const defaultProps = { type: "default" };
 const YearPicker = factory((_props) => {
 	const props = 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 } = 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 } = pickCalendarProps(rest);
+	const setDateRef = useRef(null);
+	const setLevelRef = useRef(null);
+	const getStyles = useStyles({
+		name: __staticSelector || "YearPicker",
+		classes: YearPicker_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		rootSelector: presets ? "yearPickerRoot" : void 0,
+		varsResolver,
+		vars
+	});
+	const { onDateChange, onRootMouseLeave, onHoveredDateChange, getControlProps, setValue } = useDatesState({
 		type,
 		level: "year",
 		allowDeselect,
@@ -23,7 +44,12 @@ const YearPicker = factory((_props) => {
 		styles,
 		props
 	});
-	return /* @__PURE__ */ jsx(Calendar, {
+	const calendar = /* @__PURE__ */ jsx(Calendar, {
+		classNames: resolvedClassNames,
+		styles: resolvedStyles,
+		size,
+		...calendarProps,
+		...!presets ? others : {},
 		minLevel: "decade",
 		__updateDateOnYearSelect: __updateDateOnYearSelect ?? false,
 		__staticSelector: __staticSelector || "YearPicker",
@@ -37,12 +63,46 @@ const YearPicker = 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__ */ 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("yearPickerRoot"),
+		size,
+		...others,
+		children: [/* @__PURE__ */ jsx("div", {
+			...getStyles("presetsList"),
+			children: presetButtons
+		}), calendar]
 	});
 });
-YearPicker.classes = Calendar.classes;
+YearPicker.classes = {
+	...Calendar.classes,
+	...YearPicker_module_default
+};
+YearPicker.varsResolver = varsResolver;
 YearPicker.displayName = "@mantine/dates/YearPicker";
 //#endregion
 export { YearPicker };

package/esm/components/YearPicker/YearPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearPicker.mjs","names":[],"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,aAAkC,SAA4B,WAAW;CACpF,MAAM,QAAQ,SAAS,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,oBAAoB,cAAc;EACvF;EACN,OAAO;EACP;EACA;EACA;EACA;EACU;EACV;EACD,CAAC;CAEF,MAAM,EAAE,oBAAoB,mBAAmB,qBAAwC;EACrF;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,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,UAAU,SAAS;AAC9B,WAAW,cAAc"}
+{"version":3,"file":"YearPicker.mjs","names":["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,eAAe,oBAAuC,GAAG,EAAE,YAAY,EAC3E,gBAAgB,EACd,sBAAsB,YAAY,KAAK,EACxC,EACF,EAAE;AAEH,MAAM,eAAe,EACnB,MAAM,WACP;AAQD,MAAa,aAAkC,SAA4B,WAAW;CACpF,MAAM,QAAQ,SAAS,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,WAAW,kBAAkB,KAAK;CACzD,MAAM,aAAa,OAA2C,KAAK;CACnE,MAAM,cAAc,OAAgD,KAAK;CAEzE,MAAM,YAAY,UAA6B;EAC7C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,mBAAmB,KAAA;EAC3C;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,qBAAwC;EACrF;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,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,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,iBAAiB;EAAQ;EAAM,GAAI;YAAtD,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,cAAc;aAAG;GAAoB,CAAA,EACvD,SACG;;EAER;AAEF,WAAW,UAAU;CAAE,GAAG,SAAS;CAAS,GAAGA;CAAS;AACxD,WAAW,eAAe;AAC1B,WAAW,cAAc"}

package/esm/components/YearPicker/YearPicker.module.mjs

@@ -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
+export { YearPicker_module_default as default };
+
+//# sourceMappingURL=YearPicker.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"YearPicker.module.mjs","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/esm/components/YearPickerInput/YearPickerInput.mjs

@@ -17,7 +17,7 @@ const defaultProps = {
 };
 const YearPickerInput = factory((_props) => {
 	const props = 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 } = useResolvedStylesApi({
 		classNames,
 		styles,
@@ -75,6 +75,7 @@ const YearPickerInput = factory((_props) => {
 			__stopPropagation: dropdownType === "popover",
 			minDate,
 			maxDate,
+			presets,
 			attributes
 		})
 	});

package/esm/components/YearPickerInput/YearPickerInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"YearPickerInput.mjs","names":[],"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,kBAA4C,SACtD,WAAW;CACV,MAAM,QAAQ,SAAS,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,mBAAmB,qBAA6C;EAC1F;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;EACE;EACN,kBAAiB;EACL;YAEZ,oBAAC,YAAD;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,gBAAgB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}
+{"version":3,"file":"YearPickerInput.mjs","names":[],"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,kBAA4C,SACtD,WAAW;CACV,MAAM,QAAQ,SAAS,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,mBAAmB,qBAA6C;EAC1F;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;EACE;EACN,kBAAiB;EACL;YAEZ,oBAAC,YAAD;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,gBAAgB,UAAU;CAAE,GAAG,gBAAgB;CAAS,GAAG,WAAW;CAAS;AAC/E,gBAAgB,cAAc"}

package/lib/components/MonthPicker/MonthPicker.d.ts

@@ -5,7 +5,14 @@ import { DecadeLevelBaseSettings } from '../DecadeLevel';
 import { DecadeLevelGroupStylesNames } from '../DecadeLevelGroup';
 import { YearLevelBaseSettings } from '../YearLevel';
 import { YearLevelGroupStylesNames } from '../YearLevelGroup';
-export type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames;
+export interface MonthPickerPreset<Type extends DatePickerType> {
+    value: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : Type extends 'multiple' ? DateStringValue[] : DateStringValue | null;
+    label: React.ReactNode;
+}
+export type MonthPickerCssVariables = {
+    monthPickerRoot: '--preset-font-size';
+};
+export type MonthPickerStylesNames = DecadeLevelGroupStylesNames | YearLevelGroupStylesNames | 'presetsList' | 'presetButton' | 'monthPickerRoot';
 type MonthPickerLevel = Exclude<CalendarLevel, 'month'>;
 export interface MonthPickerBaseProps<Type extends DatePickerType = 'default'> extends PickerBaseProps<Type>, DecadeLevelBaseSettings, YearLevelBaseSettings, Omit<CalendarBaseProps, 'onNextMonth' | 'onPreviousMonth' | 'hasNextLevel'> {
     /** Max level that user can go up to @default 'decade' */
@@ -16,6 +23,10 @@ export interface MonthPickerBaseProps<Type extends DatePickerType = 'default'> e
     level?: CalendarLevel;
     /** Called when level changes */
     onLevelChange?: (level: MonthPickerLevel) => void;
+    /** Predefined values to pick from */
+    presets?: MonthPickerPreset<Type>[];
+    /** If defined, called with preset value, suppresses `onChange` call */
+    __onPresetSelect?: (preset: Type extends 'range' ? [DateStringValue | null, DateStringValue | null] : DateStringValue | null) => void;
 }
 export interface MonthPickerProps<Type extends DatePickerType = 'default'> extends BoxProps, MonthPickerBaseProps<Type>, StylesApiProps<MonthPickerFactory>, ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
     /** Called when month is selected */
@@ -25,6 +36,7 @@ export type MonthPickerFactory = Factory<{
     props: MonthPickerProps;
     ref: HTMLDivElement;
     stylesNames: MonthPickerStylesNames;
+    vars: MonthPickerCssVariables;
 }>;
 type MonthPickerComponent = (<Type extends DatePickerType = 'default'>(props: MonthPickerProps<Type> & {
     ref?: React.Ref<HTMLDivElement>;

package/lib/components/SpinInput/SpinInput.d.ts

@@ -9,8 +9,9 @@ interface SpinInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'
     onPreviousInput?: () => void;
     allowTemporaryZero?: boolean;
     placeholder?: string;
+    disableAutoAdvance?: boolean;
 }
-export declare function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero, placeholder, ...others }: SpinInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpinInput({ value, min, max, onChange, focusable, step, onNextInput, onPreviousInput, onFocus, readOnly, allowTemporaryZero, placeholder, disableAutoAdvance, ...others }: SpinInputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace SpinInput {
     var displayName: string;
 }

package/lib/components/TimePicker/TimePicker.d.ts

@@ -1,10 +1,12 @@
 import { __BaseInputProps, __InputStylesNames, BoxProps, ClearSectionMode, CloseButtonProps, DataAttributes, ElementProps, Factory, InputVariant, PopoverProps, ScrollAreaProps, StylesApiProps } from '@mantine/core';
-import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets } from './TimePicker.types';
+import { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerPresets, TimePickerType } from './TimePicker.types';
 export type TimePickerStylesNames = 'fieldsRoot' | 'fieldsGroup' | 'field' | 'controlsList' | 'controlsListGroup' | 'control' | 'dropdown' | 'presetsRoot' | 'presetsGroup' | 'presetsGroupLabel' | 'presetControl' | 'scrollarea' | __InputStylesNames;
 export type TimePickerCssVariables = {
     dropdown: '--control-font-size';
 };
 export interface TimePickerProps extends BoxProps, __BaseInputProps, StylesApiProps<TimePickerFactory>, ElementProps<'div', 'onChange' | 'defaultValue'> {
+    /** TimePicker type, `'time'` for regular time input, `'duration'` for duration input that allows values greater than 24 hours @default 'time' */
+    type?: TimePickerType;
     /** Controlled component value */
     value?: string;
     /** Uncontrolled component default value */
@@ -91,6 +93,8 @@ export interface TimePickerProps extends BoxProps, __BaseInputProps, StylesApiPr
     minutesPlaceholder?: string;
     /** Seconds input placeholder, @default -- */
     secondsPlaceholder?: string;
+    /** Minimum number of digits displayed in the hours input, applicable only when `type="duration"` is set @default 2 */
+    minHoursDigits?: number;
 }
 export type TimePickerFactory = Factory<{
     props: TimePickerProps;

package/lib/components/TimePicker/TimePicker.types.d.ts

@@ -1,4 +1,5 @@
 export type TimePickerFormat = '12h' | '24h';
+export type TimePickerType = 'time' | 'duration';
 export interface TimePickerAmPmLabels {
     am: string;
     pm: string;

package/lib/components/TimePicker/use-time-picker.d.ts

@@ -1,4 +1,4 @@
-import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './TimePicker.types';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit, TimePickerType } from './TimePicker.types';
 interface UseTimePickerInput {
     value: string | undefined;
     defaultValue: string | undefined;
@@ -12,8 +12,9 @@ interface UseTimePickerInput {
     disabled: boolean | undefined;
     clearable: boolean | undefined;
     pasteSplit: TimePickerPasteSplit | undefined;
+    type: TimePickerType;
 }
-export declare function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds, min, max, clearable, readOnly, disabled, pasteSplit, }: UseTimePickerInput): {
+export declare function useTimePicker({ value, defaultValue, onChange, format, amPmLabels, withSeconds, min, max, clearable, readOnly, disabled, pasteSplit, type, }: UseTimePickerInput): {
     refs: {
         hours: import("react").RefObject<HTMLInputElement | null>;
         minutes: import("react").RefObject<HTMLInputElement | null>;