@mantine/core 9.0.2 → 9.1.1

package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs

@@ -65,6 +65,8 @@ const SemiCircleProgress = require_factory.factory((_props) => {
 			"data-orientation": orientation,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+			width: size,
+			height: size / 2,
 			viewBox: `0 0 ${size} ${size / 2}`,
 			...getStyles("svg"),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {

package/cjs/components/SemiCircleProgress/SemiCircleProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n  | 'root'\n  | 'svg'\n  | 'emptySegment'\n  | 'filledSegment'\n  | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n  root:\n    | '--scp-filled-segment-color'\n    | '--scp-empty-segment-color'\n    | '--scp-rotation'\n    | '--scp-transition-duration'\n    | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n  extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n  /** Progress value from `0` to `100` */\n  value: number;\n\n  /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n  size?: number;\n\n  /** Stroke width of the circle segments in px @default 12 */\n  thickness?: number;\n\n  /** Orientation of the circle @default 'up' */\n  orientation?: 'up' | 'down';\n\n  /** Direction from which the circle is filled @default 'left-to-right' */\n  fillDirection?: 'right-to-left' | 'left-to-right';\n\n  /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n  filledSegmentColor?: MantineColor;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n  emptySegmentColor?: MantineColor;\n\n  /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n  transitionDuration?: number;\n\n  /** Label rendered inside the circle */\n  label?: React.ReactNode;\n\n  /** Label position relative to the circle center @default 'bottom' */\n  labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n  props: SemiCircleProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: SemiCircleProgressStylesNames;\n  vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 200,\n  thickness: 12,\n  orientation: 'up',\n  fillDirection: 'left-to-right',\n  labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n  orientation,\n  fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n  if (orientation === 'down') {\n    if (fillDirection === 'right-to-left') {\n      return 'rotate(180deg) rotateY(180deg)';\n    }\n    return 'rotate(180deg)';\n  }\n  if (fillDirection === 'left-to-right') {\n    return 'rotateY(180deg)';\n  }\n\n  return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n  (\n    theme,\n    {\n      filledSegmentColor,\n      emptySegmentColor,\n      orientation,\n      fillDirection,\n      transitionDuration,\n      thickness,\n    }\n  ) => ({\n    root: {\n      '--scp-filled-segment-color': filledSegmentColor\n        ? getThemeColor(filledSegmentColor, theme)\n        : undefined,\n      '--scp-empty-segment-color': emptySegmentColor\n        ? getThemeColor(emptySegmentColor, theme)\n        : undefined,\n      '--scp-rotation': getRotation({ orientation, fillDirection }),\n      '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n      '--scp-thickness': rem(thickness),\n    },\n  })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n  const props = useProps('SemiCircleProgress', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    thickness,\n    value,\n    orientation,\n    fillDirection,\n    filledSegmentColor,\n    emptySegmentColor,\n    transitionDuration,\n    label,\n    labelPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SemiCircleProgressFactory>({\n    name: 'SemiCircleProgress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const coordinateForCircle = size / 2;\n  const radius = (size - 2 * thickness) / 2;\n  const circumference = Math.PI * radius;\n  const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      {label && (\n        <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n          {label}\n        </div>\n      )}\n\n      <svg viewBox={`0 0 ${size} ${size / 2}`} {...getStyles('svg')}>\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-empty-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('emptySegment', { style: { strokeDashoffset: circumference } })}\n        />\n\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-filled-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('filledSegment', { style: { strokeDashoffset: semiCirclePercentage } })}\n        />\n      </svg>\n    </Box>\n  );\n});\n\nSemiCircleProgress.displayName = '@mantine/core/SemiCircleProgress';\nSemiCircleProgress.classes = classes;\nSemiCircleProgress.varsResolver = varsResolver;\n\nexport namespace SemiCircleProgress {\n  export type Props = SemiCircleProgressProps;\n  export type StylesNames = SemiCircleProgressStylesNames;\n  export type CssVariables = SemiCircleProgressCssVariables;\n  export type Factory = SemiCircleProgressFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,aAAa;CACb,eAAe;CACf,eAAe;CAChB;AAED,SAAS,YAAY,EACnB,aACA,iBACiE;AACjE,KAAI,gBAAgB,QAAQ;AAC1B,MAAI,kBAAkB,gBACpB,QAAO;AAET,SAAO;;AAET,KAAI,kBAAkB,gBACpB,QAAO;;AAMX,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,oBACA,mBACA,aACA,eACA,oBACA,iBAEE,EACJ,MAAM;CACJ,8BAA8B,qBAC1BC,wBAAAA,cAAc,oBAAoB,MAAM,GACxC,KAAA;CACJ,6BAA6B,oBACzBA,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACJ,kBAAkB,YAAY;EAAE;EAAa;EAAe,CAAC;CAC7D,6BAA6B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC9E,mBAAmBC,YAAAA,IAAI,UAAU;CAClC,EACF,EACF;AAED,MAAa,qBAAqBC,gBAAAA,SAAoC,WAAW;CAC/E,MAAM,QAAQC,kBAAAA,SAAS,sBAAsB,cAAc,OAAO;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,WACA,OACA,aACA,eACA,oBACA,mBACA,oBACA,OACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAqC;EACrD,MAAM;EACN,SAAA,kCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,OAAO;CACnC,MAAM,UAAU,OAAO,IAAI,aAAa;CACxC,MAAM,gBAAgB,KAAK,KAAK;CAChC,MAAM,wBAAA,GAAA,eAAA,OAA6B,OAAO,GAAG,IAAI,IAAI,gBAAgB;AAErE,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAA5C,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,iBAAe;GAAe,oBAAkB;aAC1E;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,SAAS,OAAO,KAAK,GAAG,OAAO;GAAK,GAAI,UAAU,MAAM;aAA7D,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,eAAe,EAAE,CAAC;IAC7E,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,sBAAsB,EAAE,CAAC;IACrF,CAAA,CACE;KACF;;EAER;AAEF,mBAAmB,cAAc;AACjC,mBAAmB,UAAUC,kCAAAA;AAC7B,mBAAmB,eAAe"}
+{"version":3,"file":"SemiCircleProgress.cjs","names":["createVarsResolver","getThemeColor","rem","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/SemiCircleProgress/SemiCircleProgress.tsx"],"sourcesContent":["import { clamp } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './SemiCircleProgress.module.css';\n\nexport type SemiCircleProgressStylesNames =\n  | 'root'\n  | 'svg'\n  | 'emptySegment'\n  | 'filledSegment'\n  | 'label';\n\nexport type SemiCircleProgressCssVariables = {\n  root:\n    | '--scp-filled-segment-color'\n    | '--scp-empty-segment-color'\n    | '--scp-rotation'\n    | '--scp-transition-duration'\n    | '--scp-thickness';\n};\n\nexport interface SemiCircleProgressProps\n  extends BoxProps, StylesApiProps<SemiCircleProgressFactory>, ElementProps<'div'> {\n  /** Progress value from `0` to `100` */\n  value: number;\n\n  /** Width of the component and diameter of the full circle in px. The visible SVG height will be size/2 @default 200 */\n  size?: number;\n\n  /** Stroke width of the circle segments in px @default 12 */\n  thickness?: number;\n\n  /** Orientation of the circle @default 'up' */\n  orientation?: 'up' | 'down';\n\n  /** Direction from which the circle is filled @default 'left-to-right' */\n  fillDirection?: 'right-to-left' | 'left-to-right';\n\n  /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n  filledSegmentColor?: MantineColor;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'gray.2' in light mode, 'dark.4' in dark mode */\n  emptySegmentColor?: MantineColor;\n\n  /** Transition duration for the filled segment progress changes in ms. Does not affect color transitions @default 0 */\n  transitionDuration?: number;\n\n  /** Label rendered inside the circle */\n  label?: React.ReactNode;\n\n  /** Label position relative to the circle center @default 'bottom' */\n  labelPosition?: 'center' | 'bottom';\n}\n\nexport type SemiCircleProgressFactory = Factory<{\n  props: SemiCircleProgressProps;\n  ref: HTMLDivElement;\n  stylesNames: SemiCircleProgressStylesNames;\n  vars: SemiCircleProgressCssVariables;\n}>;\n\nconst defaultProps = {\n  size: 200,\n  thickness: 12,\n  orientation: 'up',\n  fillDirection: 'left-to-right',\n  labelPosition: 'bottom',\n} satisfies Partial<SemiCircleProgressProps>;\n\nfunction getRotation({\n  orientation,\n  fillDirection,\n}: Pick<SemiCircleProgressProps, 'orientation' | 'fillDirection'>) {\n  if (orientation === 'down') {\n    if (fillDirection === 'right-to-left') {\n      return 'rotate(180deg) rotateY(180deg)';\n    }\n    return 'rotate(180deg)';\n  }\n  if (fillDirection === 'left-to-right') {\n    return 'rotateY(180deg)';\n  }\n\n  return undefined;\n}\n\nconst varsResolver = createVarsResolver<SemiCircleProgressFactory>(\n  (\n    theme,\n    {\n      filledSegmentColor,\n      emptySegmentColor,\n      orientation,\n      fillDirection,\n      transitionDuration,\n      thickness,\n    }\n  ) => ({\n    root: {\n      '--scp-filled-segment-color': filledSegmentColor\n        ? getThemeColor(filledSegmentColor, theme)\n        : undefined,\n      '--scp-empty-segment-color': emptySegmentColor\n        ? getThemeColor(emptySegmentColor, theme)\n        : undefined,\n      '--scp-rotation': getRotation({ orientation, fillDirection }),\n      '--scp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,\n      '--scp-thickness': rem(thickness),\n    },\n  })\n);\n\nexport const SemiCircleProgress = factory<SemiCircleProgressFactory>((_props) => {\n  const props = useProps('SemiCircleProgress', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    size,\n    thickness,\n    value,\n    orientation,\n    fillDirection,\n    filledSegmentColor,\n    emptySegmentColor,\n    transitionDuration,\n    label,\n    labelPosition,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SemiCircleProgressFactory>({\n    name: 'SemiCircleProgress',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const coordinateForCircle = size / 2;\n  const radius = (size - 2 * thickness) / 2;\n  const circumference = Math.PI * radius;\n  const semiCirclePercentage = clamp(value, 0, 100) * (circumference / 100);\n\n  return (\n    <Box size={size} {...getStyles('root')} {...others}>\n      {label && (\n        <div {...getStyles('label')} data-position={labelPosition} data-orientation={orientation}>\n          {label}\n        </div>\n      )}\n\n      <svg width={size} height={size / 2} viewBox={`0 0 ${size} ${size / 2}`} {...getStyles('svg')}>\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-empty-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('emptySegment', { style: { strokeDashoffset: circumference } })}\n        />\n\n        <circle\n          cx={coordinateForCircle}\n          cy={coordinateForCircle}\n          r={radius}\n          fill=\"none\"\n          stroke=\"var(--scp-filled-segment-color)\"\n          strokeWidth={thickness}\n          strokeDasharray={circumference}\n          {...getStyles('filledSegment', { style: { strokeDashoffset: semiCirclePercentage } })}\n        />\n      </svg>\n    </Box>\n  );\n});\n\nSemiCircleProgress.displayName = '@mantine/core/SemiCircleProgress';\nSemiCircleProgress.classes = classes;\nSemiCircleProgress.varsResolver = varsResolver;\n\nexport namespace SemiCircleProgress {\n  export type Props = SemiCircleProgressProps;\n  export type StylesNames = SemiCircleProgressStylesNames;\n  export type CssVariables = SemiCircleProgressCssVariables;\n  export type Factory = SemiCircleProgressFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyEA,MAAM,eAAe;CACnB,MAAM;CACN,WAAW;CACX,aAAa;CACb,eAAe;CACf,eAAe;CAChB;AAED,SAAS,YAAY,EACnB,aACA,iBACiE;AACjE,KAAI,gBAAgB,QAAQ;AAC1B,MAAI,kBAAkB,gBACpB,QAAO;AAET,SAAO;;AAET,KAAI,kBAAkB,gBACpB,QAAO;;AAMX,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EACE,oBACA,mBACA,aACA,eACA,oBACA,iBAEE,EACJ,MAAM;CACJ,8BAA8B,qBAC1BC,wBAAAA,cAAc,oBAAoB,MAAM,GACxC,KAAA;CACJ,6BAA6B,oBACzBA,wBAAAA,cAAc,mBAAmB,MAAM,GACvC,KAAA;CACJ,kBAAkB,YAAY;EAAE;EAAa;EAAe,CAAC;CAC7D,6BAA6B,qBAAqB,GAAG,mBAAmB,MAAM,KAAA;CAC9E,mBAAmBC,YAAAA,IAAI,UAAU;CAClC,EACF,EACF;AAED,MAAa,qBAAqBC,gBAAAA,SAAoC,WAAW;CAC/E,MAAM,QAAQC,kBAAAA,SAAS,sBAAsB,cAAc,OAAO;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,WACA,OACA,aACA,eACA,oBACA,mBACA,oBACA,OACA,eACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAqC;EACrD,MAAM;EACN,SAAA,kCAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,OAAO;CACnC,MAAM,UAAU,OAAO,IAAI,aAAa;CACxC,MAAM,gBAAgB,KAAK,KAAK;CAChC,MAAM,wBAAA,GAAA,eAAA,OAA6B,OAAO,GAAG,IAAI,IAAI,gBAAgB;AAErE,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAW;EAAM,GAAI,UAAU,OAAO;EAAE,GAAI;YAA5C,CACG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,iBAAe;GAAe,oBAAkB;aAC1E;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,OAAO;GAAM,QAAQ,OAAO;GAAG,SAAS,OAAO,KAAK,GAAG,OAAO;GAAK,GAAI,UAAU,MAAM;aAA5F,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,kBAAkB,eAAe,EAAE,CAAC;IAC7E,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI;IACJ,IAAI;IACJ,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,iBAAiB;IACjB,GAAI,UAAU,iBAAiB,EAAE,OAAO,EAAE,kBAAkB,sBAAsB,EAAE,CAAC;IACrF,CAAA,CACE;KACF;;EAER;AAEF,mBAAmB,cAAc;AACjC,mBAAmB,UAAUC,kCAAAA;AAC7B,mBAAmB,eAAe"}

package/cjs/components/Slider/Marks/Marks.cjs

@@ -7,7 +7,7 @@ const require_is_mark_filled = require("./is-mark-filled.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Slider/Marks/Marks.tsx
-function Marks({ marks, min, max, disabled, value, offset, inverted }) {
+function Marks({ marks, min, max, disabled, value, offset, inverted, startPointValue }) {
 	const { getStyles } = require_Slider_context.useSliderContext();
 	if (!marks) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: marks.map((mark, index) => {
@@ -27,7 +27,8 @@ function Marks({ marks, min, max, disabled, value, offset, inverted }) {
 					mark,
 					value,
 					offset,
-					inverted
+					inverted,
+					startPointValue
 				}),
 				disabled
 			}

package/cjs/components/Slider/Marks/Marks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Marks.cjs","names":["useSliderContext","Box","getPosition","isMarkFilled"],"sources":["../../../../src/components/Slider/Marks/Marks.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { useSliderContext } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\n\nexport interface MarksProps {\n  marks: SliderMark[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  offset: number | undefined;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n}\n\nexport function Marks({ marks, min, max, disabled, value, offset, inverted }: MarksProps) {\n  const { getStyles } = useSliderContext();\n\n  if (!marks) {\n    return null;\n  }\n\n  const items = marks.map((mark, index) => {\n    if (mark.hidden) {\n      return null;\n    }\n\n    return (\n      <Box\n        {...getStyles('markWrapper')}\n        __vars={{ '--mark-offset': `${getPosition({ value: mark.value, min, max })}%` }}\n        key={index}\n      >\n        <Box\n          {...getStyles('mark')}\n          mod={{ filled: isMarkFilled({ mark, value, offset, inverted }), disabled }}\n        />\n        {mark.label && <div {...getStyles('markLabel')}>{mark.label}</div>}\n      </Box>\n    );\n  });\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,MAAM,EAAE,OAAO,KAAK,KAAK,UAAU,OAAO,QAAQ,YAAwB;CACxF,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,KAAI,CAAC,MACH,QAAO;AAuBT,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UApBO,MAAM,KAAK,MAAM,UAAU;AACvC,MAAI,KAAK,OACP,QAAO;AAGT,SACE,iBAAA,GAAA,MAAA,eAACC,YAAAA,KAAD;GACE,GAAI,UAAU,cAAc;GAC5B,QAAQ,EAAE,iBAAiB,GAAGC,qBAAAA,YAAY;IAAE,OAAO,KAAK;IAAO;IAAK;IAAK,CAAC,CAAC,IAAI;GAC/E,KAAK;GAOD,EALJ,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;GACE,GAAI,UAAU,OAAO;GACrB,KAAK;IAAE,QAAQE,uBAAAA,aAAa;KAAE;KAAM;KAAO;KAAQ;KAAU,CAAC;IAAE;IAAU;GAC1E,CAAA,EACD,KAAK,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAAG,KAAK;GAAY,CAAA,CAC9D;GAER,EAEuB,CAAA;;AAG3B,MAAM,cAAc"}
+{"version":3,"file":"Marks.cjs","names":["useSliderContext","Box","getPosition","isMarkFilled"],"sources":["../../../../src/components/Slider/Marks/Marks.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { useSliderContext } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\n\nexport interface MarksProps {\n  marks: SliderMark[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  offset: number | undefined;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  startPointValue?: number;\n}\n\nexport function Marks({\n  marks,\n  min,\n  max,\n  disabled,\n  value,\n  offset,\n  inverted,\n  startPointValue,\n}: MarksProps) {\n  const { getStyles } = useSliderContext();\n\n  if (!marks) {\n    return null;\n  }\n\n  const items = marks.map((mark, index) => {\n    if (mark.hidden) {\n      return null;\n    }\n\n    return (\n      <Box\n        {...getStyles('markWrapper')}\n        __vars={{ '--mark-offset': `${getPosition({ value: mark.value, min, max })}%` }}\n        key={index}\n      >\n        <Box\n          {...getStyles('mark')}\n          mod={{\n            filled: isMarkFilled({ mark, value, offset, inverted, startPointValue }),\n            disabled,\n          }}\n        />\n        {mark.label && <div {...getStyles('markLabel')}>{mark.label}</div>}\n      </Box>\n    );\n  });\n\n  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"mappings":";;;;;;;;;AAiBA,SAAgB,MAAM,EACpB,OACA,KACA,KACA,UACA,OACA,QACA,UACA,mBACa;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,KAAI,CAAC,MACH,QAAO;AA0BT,QAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAA,UAvBO,MAAM,KAAK,MAAM,UAAU;AACvC,MAAI,KAAK,OACP,QAAO;AAGT,SACE,iBAAA,GAAA,MAAA,eAACC,YAAAA,KAAD;GACE,GAAI,UAAU,cAAc;GAC5B,QAAQ,EAAE,iBAAiB,GAAGC,qBAAAA,YAAY;IAAE,OAAO,KAAK;IAAO;IAAK;IAAK,CAAC,CAAC,IAAI;GAC/E,KAAK;GAUD,EARJ,iBAAA,GAAA,kBAAA,KAACD,YAAAA,KAAD;GACE,GAAI,UAAU,OAAO;GACrB,KAAK;IACH,QAAQE,uBAAAA,aAAa;KAAE;KAAM;KAAO;KAAQ;KAAU;KAAiB,CAAC;IACxE;IACD;GACD,CAAA,EACD,KAAK,SAAS,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAAG,KAAK;GAAY,CAAA,CAC9D;GAER,EAEuB,CAAA;;AAG3B,MAAM,cAAc"}

package/cjs/components/Slider/Marks/is-mark-filled.cjs

@@ -1,6 +1,7 @@
 "use client";
 //#region packages/@mantine/core/src/components/Slider/Marks/is-mark-filled.ts
-function isMarkFilled({ mark, offset, value, inverted = false }) {
+function isMarkFilled({ mark, offset, value, inverted = false, startPointValue }) {
+	if (typeof startPointValue === "number" && !inverted) return mark.value >= startPointValue && mark.value <= value || mark.value <= startPointValue && mark.value >= value;
 	return inverted ? typeof offset === "number" ? mark.value <= offset || mark.value >= value : mark.value >= value : typeof offset === "number" ? mark.value >= offset && mark.value <= value : mark.value <= value;
 }
 //#endregion

package/cjs/components/Slider/Marks/is-mark-filled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"is-mark-filled.cjs","names":[],"sources":["../../../../src/components/Slider/Marks/is-mark-filled.ts"],"sourcesContent":["interface IsMarkFilled {\n  mark: { value: number; label?: any };\n  offset?: number;\n  value: number;\n  inverted?: boolean;\n}\n\nexport function isMarkFilled({ mark, offset, value, inverted = false }: IsMarkFilled) {\n  return inverted\n    ? typeof offset === 'number'\n      ? mark.value <= offset || mark.value >= value\n      : mark.value >= value\n    : typeof offset === 'number'\n      ? mark.value >= offset && mark.value <= value\n      : mark.value <= value;\n}\n"],"mappings":";;AAOA,SAAgB,aAAa,EAAE,MAAM,QAAQ,OAAO,WAAW,SAAuB;AACpF,QAAO,WACH,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS,QAChB,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS"}
+{"version":3,"file":"is-mark-filled.cjs","names":[],"sources":["../../../../src/components/Slider/Marks/is-mark-filled.ts"],"sourcesContent":["interface IsMarkFilled {\n  mark: { value: number; label?: any };\n  offset?: number;\n  value: number;\n  inverted?: boolean;\n  startPointValue?: number;\n}\n\nexport function isMarkFilled({\n  mark,\n  offset,\n  value,\n  inverted = false,\n  startPointValue,\n}: IsMarkFilled) {\n  if (typeof startPointValue === 'number' && !inverted) {\n    return (\n      (mark.value >= startPointValue && mark.value <= value) ||\n      (mark.value <= startPointValue && mark.value >= value)\n    );\n  }\n\n  return inverted\n    ? typeof offset === 'number'\n      ? mark.value <= offset || mark.value >= value\n      : mark.value >= value\n    : typeof offset === 'number'\n      ? mark.value >= offset && mark.value <= value\n      : mark.value <= value;\n}\n"],"mappings":";;AAQA,SAAgB,aAAa,EAC3B,MACA,QACA,OACA,WAAW,OACX,mBACe;AACf,KAAI,OAAO,oBAAoB,YAAY,CAAC,SAC1C,QACG,KAAK,SAAS,mBAAmB,KAAK,SAAS,SAC/C,KAAK,SAAS,mBAAmB,KAAK,SAAS;AAIpD,QAAO,WACH,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS,QAChB,OAAO,WAAW,WAChB,KAAK,SAAS,UAAU,KAAK,SAAS,QACtC,KAAK,SAAS"}

package/cjs/components/Slider/Slider/Slider.cjs

@@ -47,7 +47,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { s
 } }));
 const Slider = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Slider", defaultProps, _props);
-	const { classNames, styles, value, onChange, onChangeEnd, size, min, max, domain, step, precision: _precision, defaultValue, name, marks, label, labelTransitionProps, labelAlwaysOn, thumbLabel, showLabelOnHover, thumbChildren, disabled, unstyled, scale, inverted, orientation, className, style, vars, hiddenInputProps, restrictToMarks, thumbProps, attributes, ref, ...others } = props;
+	const { classNames, styles, value, onChange, onChangeEnd, size, min, max, domain, step, precision: _precision, defaultValue, name, marks, label, labelTransitionProps, labelAlwaysOn, thumbLabel, showLabelOnHover, thumbChildren, disabled, unstyled, scale, inverted, startPointValue, orientation, className, style, vars, hiddenInputProps, restrictToMarks, thumbProps, attributes, ref, ...others } = props;
 	const getStyles = require_use_styles.useStyles({
 		name: "Slider",
 		props,
@@ -85,6 +85,14 @@ const Slider = require_factory.factory((_props) => {
 	const scaledValue = scale(_value);
 	const _label = typeof label === "function" ? label(scaledValue) : label;
 	const precision = _precision ?? require_get_precision.getPrecision(step);
+	const hasStartPoint = typeof startPointValue === "number" && !inverted;
+	const startPosition = hasStartPoint ? require_get_position.getPosition({
+		value: startPointValue,
+		min: domainMin,
+		max: domainMax
+	}) : 0;
+	const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;
+	const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;
 	const handleChange = (0, react.useCallback)(({ x }) => {
 		if (!disabled) {
 			const clampedValue = (0, _mantine_hooks.clamp)(require_get_change_value.getChangeValue({
@@ -217,12 +225,13 @@ const Slider = require_factory.factory((_props) => {
 			orientation,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Track.Track, {
 				inverted,
-				offset: 0,
-				filled: position,
+				offset: trackOffset,
+				filled: trackFilled,
 				marks,
 				min: domainMin,
 				max: domainMax,
 				value: scaledValue,
+				startPointValue: hasStartPoint ? startPointValue : void 0,
 				disabled,
 				containerProps: {
 					ref: container,

package/cjs/components/Slider/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={0}\n          filled={position}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","names":["createVarsResolver","getSize","getThemeColor","getRadius","rem","factory","useProps","useStyles","useDirection","getPosition","getPrecision","getChangeValue","findClosestNumber","getNextMarkValue","getFloatingValue","getPreviousMarkValue","getFirstMarkValue","getLastMarkValue","SliderProvider","SliderRoot","Track","Thumb","classes"],"sources":["../../../../src/components/Slider/Slider/Slider.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { clamp, useMergedRef, useMove, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  findClosestNumber,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  rem,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { TransitionOverride } from '../../Transition';\nimport { SliderCssVariables, SliderProvider, SliderStylesNames } from '../Slider.context';\nimport { SliderMark } from '../SliderMark';\nimport { SliderRoot } from '../SliderRoot/SliderRoot';\nimport { Thumb } from '../Thumb/Thumb';\nimport { Track } from '../Track/Track';\nimport { getChangeValue } from '../utils/get-change-value/get-change-value';\nimport { getFloatingValue } from '../utils/get-floating-value/get-floating-value';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { getPrecision } from '../utils/get-precision/get-precision';\nimport {\n  getFirstMarkValue,\n  getLastMarkValue,\n  getNextMarkValue,\n  getPreviousMarkValue,\n} from '../utils/get-step-mark-value/get-step-mark-value';\nimport classes from '../Slider.module.css';\n\nexport interface SliderProps\n  extends BoxProps, StylesApiProps<SliderFactory>, ElementProps<'div', 'onChange'> {\n  /** Key of `theme.colors` or any valid CSS color, controls color of track and thumb @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Controls size of the track @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Minimal possible value @default 0 */\n  min?: number;\n\n  /** Maximum possible value @default 100 */\n  max?: number;\n\n  /** Domain of the slider, defines the selectable value range independently of min/max. Useful when you want to display a wider track range (min/max) but restrict actual selection to a subset (domain). @default [min, max] */\n  domain?: [number, number];\n\n  /** Number by which value will be incremented/decremented with thumb drag and arrows @default 1 */\n  step?: number;\n\n  /** Number of significant digits after the decimal point */\n  precision?: number;\n\n  /** Controlled component value */\n  value?: number;\n\n  /** Uncontrolled component default value */\n  defaultValue?: number;\n\n  /** Called when value changes */\n  onChange?: (value: number) => void;\n\n  /** Called when user stops dragging slider or changes value with arrows */\n  onChangeEnd?: (value: number) => void;\n\n  /** Hidden input name, use with uncontrolled component */\n  name?: string;\n\n  /** Marks displayed on the track */\n  marks?: SliderMark[];\n\n  /** Function to generate label or any react node to render instead, set to null to disable label */\n  label?: React.ReactNode | ((value: number) => React.ReactNode);\n\n  /** Props passed down to the `Transition` component @default { transition: 'fade', duration: 0 } */\n  labelTransitionProps?: TransitionOverride;\n\n  /** Determines whether the label should be visible when the slider is not being dragged or hovered @default false */\n  labelAlwaysOn?: boolean;\n\n  /** Thumb `aria-label` */\n  thumbLabel?: string;\n\n  /** Determines whether the label should be displayed when the slider is hovered @default true */\n  showLabelOnHover?: boolean;\n\n  /** Content rendered inside thumb */\n  thumbChildren?: React.ReactNode;\n\n  /** Disables slider */\n  disabled?: boolean;\n\n  /** Thumb `width` and `height`, by default value is computed based on `size` prop */\n  thumbSize?: number | string;\n\n  /** A transformation function to change the scale of the slider */\n  scale?: (value: number) => number;\n\n  /** Determines whether track value representation should be inverted @default false */\n  inverted?: boolean;\n\n  /** Value at which the filled bar starts. When set, the bar extends from this point toward the current value. Ignored when `inverted` is set. */\n  startPointValue?: number;\n\n  /** Slider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Determines whether the selection should be only allowed from the given marks array @default false */\n  restrictToMarks?: boolean;\n\n  /** Props passed down to thumb element */\n  thumbProps?: React.ComponentProps<'div'>;\n}\n\nexport type SliderFactory = Factory<{\n  props: SliderProps;\n  ref: HTMLDivElement;\n  stylesNames: SliderStylesNames;\n  vars: SliderCssVariables;\n}>;\n\nconst defaultProps = {\n  radius: 'xl',\n  min: 0,\n  max: 100,\n  step: 1,\n  marks: [],\n  label: (f) => f,\n  labelTransitionProps: { transition: 'fade', duration: 0 },\n  thumbLabel: '',\n  showLabelOnHover: true,\n  scale: (v) => v,\n  size: 'md',\n} satisfies Partial<SliderProps>;\n\nconst varsResolver = createVarsResolver<SliderFactory>(\n  (theme, { size, color, thumbSize, radius }) => ({\n    root: {\n      '--slider-size': getSize(size, 'slider-size'),\n      '--slider-color': color ? getThemeColor(color, theme) : undefined,\n      '--slider-radius': radius === undefined ? undefined : getRadius(radius),\n      '--slider-thumb-size':\n        thumbSize !== undefined ? rem(thumbSize) : 'calc(var(--slider-size) * 2)',\n    },\n  })\n);\n\nexport const Slider = factory<SliderFactory>((_props) => {\n  const props = useProps('Slider', defaultProps, _props);\n  const {\n    classNames,\n    styles,\n    value,\n    onChange,\n    onChangeEnd,\n    size,\n    min,\n    max,\n    domain,\n    step,\n    precision: _precision,\n    defaultValue,\n    name,\n    marks,\n    label,\n    labelTransitionProps,\n    labelAlwaysOn,\n    thumbLabel,\n    showLabelOnHover,\n    thumbChildren,\n    disabled,\n    unstyled,\n    scale,\n    inverted,\n    startPointValue,\n    orientation,\n    className,\n    style,\n    vars,\n    hiddenInputProps,\n    restrictToMarks,\n    thumbProps,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SliderFactory>({\n    name: 'Slider',\n    props,\n    classes,\n    classNames,\n    className,\n    styles,\n    style,\n    attributes,\n    vars,\n    varsResolver,\n    unstyled,\n  });\n\n  const { dir } = useDirection();\n  const [hovered, setHovered] = useState(false);\n  const [_value, setValue] = useUncontrolled({\n    value: typeof value === 'number' ? clamp(value, min, max) : value,\n    defaultValue: typeof defaultValue === 'number' ? clamp(defaultValue, min, max) : defaultValue,\n    finalValue: clamp(0, min, max),\n    onChange,\n  });\n\n  const valueRef = useRef(_value);\n  const onChangeEndRef = useRef(onChangeEnd);\n\n  useEffect(() => {\n    onChangeEndRef.current = onChangeEnd;\n  }, [onChangeEnd]);\n\n  const root = useRef<HTMLDivElement>(null);\n  const thumb = useRef<HTMLDivElement>(null);\n  const [domainMin, domainMax] = domain || [min, max];\n  const position = getPosition({ value: _value, min: domainMin, max: domainMax });\n  const scaledValue = scale!(_value);\n  const _label = typeof label === 'function' ? label(scaledValue) : label;\n  const precision = _precision ?? getPrecision(step);\n\n  const hasStartPoint = typeof startPointValue === 'number' && !inverted;\n  const startPosition = hasStartPoint\n    ? getPosition({ value: startPointValue!, min: domainMin, max: domainMax })\n    : 0;\n  const trackOffset = hasStartPoint ? Math.min(position, startPosition) : 0;\n  const trackFilled = hasStartPoint ? Math.abs(position - startPosition) : position;\n\n  const handleChange = useCallback(\n    ({ x }: { x: number }) => {\n      if (!disabled) {\n        const nextValue = getChangeValue({\n          value: x,\n          min: domainMin,\n          max: domainMax,\n          step,\n          precision,\n        });\n        const clampedValue = clamp(nextValue, min!, max!);\n        setValue(\n          restrictToMarks && marks?.length\n            ? findClosestNumber(\n                clampedValue,\n                marks.map((mark) => mark.value)\n              )\n            : clampedValue\n        );\n        valueRef.current = clampedValue;\n      }\n    },\n    [disabled, min, max, domainMin, domainMax, step, precision, setValue, marks, restrictToMarks]\n  );\n\n  const handleScrubEnd = useCallback(() => {\n    if (!disabled && onChangeEndRef.current) {\n      const finalValue =\n        restrictToMarks && marks?.length\n          ? findClosestNumber(\n              valueRef.current,\n              marks.map((mark) => mark.value)\n            )\n          : valueRef.current;\n      onChangeEndRef.current(finalValue);\n    }\n  }, [disabled, marks, restrictToMarks]);\n\n  const { ref: container, active } = useMove(\n    ({ x, y }) => handleChange({ x: orientation === 'vertical' ? 1 - y : x }),\n    { onScrubEnd: handleScrubEnd },\n    dir\n  );\n\n  const callOnChangeEnd = useCallback(\n    (value: number) => {\n      if (!disabled && onChangeEndRef.current) {\n        onChangeEndRef.current(value);\n      }\n    },\n    [disabled]\n  );\n\n  const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!disabled) {\n      switch (event.key) {\n        case 'ArrowUp': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowRight': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getPreviousMarkValue(_value, marks) : getNextMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value - step : _value + step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowDown': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue = getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(_value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'ArrowLeft': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            const nextValue =\n              dir === 'rtl' ? getNextMarkValue(_value, marks) : getPreviousMarkValue(_value, marks);\n            setValue(nextValue);\n            callOnChangeEnd(nextValue);\n            break;\n          }\n\n          const nextValue = getFloatingValue(\n            Math.min(Math.max(dir === 'rtl' ? _value + step : _value - step, domainMin), domainMax),\n            precision\n          );\n          setValue(nextValue);\n          callOnChangeEnd(nextValue);\n          break;\n        }\n\n        case 'Home': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getFirstMarkValue(marks));\n            callOnChangeEnd(getFirstMarkValue(marks));\n            break;\n          }\n\n          setValue(min);\n          callOnChangeEnd(min);\n          break;\n        }\n\n        case 'End': {\n          event.preventDefault();\n          thumb.current?.focus();\n\n          if (restrictToMarks && marks) {\n            setValue(getLastMarkValue(marks));\n            callOnChangeEnd(getLastMarkValue(marks));\n            break;\n          }\n\n          setValue(max);\n          callOnChangeEnd(max);\n          break;\n        }\n\n        default: {\n          break;\n        }\n      }\n    }\n  };\n\n  return (\n    <SliderProvider value={{ getStyles }}>\n      <SliderRoot\n        {...others}\n        ref={useMergedRef(ref, root)}\n        onKeyDownCapture={handleTrackKeydownCapture}\n        onMouseDownCapture={() => root.current?.focus()}\n        size={size}\n        disabled={disabled}\n        orientation={orientation}\n      >\n        <Track\n          inverted={inverted}\n          offset={trackOffset}\n          filled={trackFilled}\n          marks={marks}\n          min={domainMin}\n          max={domainMax}\n          value={scaledValue}\n          startPointValue={hasStartPoint ? startPointValue : undefined}\n          disabled={disabled}\n          containerProps={{\n            ref: container,\n            onMouseEnter: showLabelOnHover ? () => setHovered(true) : undefined,\n            onMouseLeave: showLabelOnHover ? () => setHovered(false) : undefined,\n          }}\n        >\n          <Thumb\n            max={domainMax}\n            min={domainMin}\n            value={scaledValue}\n            position={position}\n            dragging={active}\n            label={_label}\n            ref={thumb as any}\n            labelTransitionProps={labelTransitionProps}\n            labelAlwaysOn={labelAlwaysOn}\n            thumbLabel={thumbLabel}\n            showLabelOnHover={showLabelOnHover}\n            isHovered={hovered}\n            disabled={disabled}\n            orientation={orientation}\n            {...thumbProps}\n          >\n            {thumbChildren}\n          </Thumb>\n        </Track>\n\n        <input type=\"hidden\" name={name} value={scaledValue} {...hiddenInputProps} />\n      </SliderRoot>\n    </SliderProvider>\n  );\n});\n\nSlider.classes = classes;\nSlider.varsResolver = varsResolver;\nSlider.displayName = '@mantine/core/Slider';\n\nexport namespace Slider {\n  export type Props = SliderProps;\n  export type StylesNames = SliderStylesNames;\n  export type CssVariables = SliderCssVariables;\n  export type Factory = SliderFactory;\n  export type Mark = SliderMark;\n}\n"],"mappings":"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"}

package/cjs/components/Slider/Track/Track.cjs

@@ -5,7 +5,7 @@ const require_Slider_context = require("../Slider.context.cjs");
 const require_Marks = require("../Marks/Marks.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Slider/Track/Track.tsx
-function Track({ filled, children, offset, disabled, marksOffset, inverted, containerProps, ...others }) {
+function Track({ filled, children, offset, disabled, marksOffset, inverted, startPointValue, containerProps, ...others }) {
 	const { getStyles } = require_Slider_context.useSliderContext();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		...getStyles("trackContainer"),
@@ -34,7 +34,8 @@ function Track({ filled, children, offset, disabled, marksOffset, inverted, cont
 					...others,
 					offset: marksOffset,
 					disabled,
-					inverted
+					inverted,
+					startPointValue
 				})
 			]
 		})

package/cjs/components/Slider/Track/Track.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Track.cjs","names":["useSliderContext","Box","Marks"],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks {...others} offset={marksOffset} disabled={disabled} inverted={inverted} />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;;AAkBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAE,KAAK,EAAE,UAAU;EAAE,GAAI;YAC3D,iBAAA,GAAA,kBAAA,MAACA,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK;IAAE;IAAU;IAAU;aAAxD;IACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;KACE,KAAK;MAAE;MAAU;MAAU;KAC3B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;MACvC;KACD,GAAI,UAAU,MAAM;KACpB,CAAA;IAED;IAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KAAO,GAAI;KAAQ,QAAQ;KAAuB;KAAoB;KAAY,CAAA;IAC9E;;EACF,CAAA;;AAIV,MAAM,cAAc"}
+{"version":3,"file":"Track.cjs","names":["useSliderContext","Box","Marks"],"sources":["../../../../src/components/Slider/Track/Track.tsx"],"sourcesContent":["import { Box } from '../../../core';\nimport { Marks } from '../Marks/Marks';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface TrackProps {\n  filled: number;\n  offset?: number;\n  marksOffset?: number;\n  marks: { value: number; label?: React.ReactNode }[] | undefined;\n  min: number;\n  max: number;\n  value: number;\n  startPointValue?: number;\n  children: React.ReactNode;\n  disabled: boolean | undefined;\n  inverted: boolean | undefined;\n  containerProps?: React.ComponentProps<'div'>;\n}\n\nexport function Track({\n  filled,\n  children,\n  offset,\n  disabled,\n  marksOffset,\n  inverted,\n  startPointValue,\n  containerProps,\n  ...others\n}: TrackProps) {\n  const { getStyles } = useSliderContext();\n\n  return (\n    <Box {...getStyles('trackContainer')} mod={{ disabled }} {...containerProps}>\n      <Box {...getStyles('track')} mod={{ inverted, disabled }}>\n        <Box\n          mod={{ inverted, disabled }}\n          __vars={{\n            '--slider-bar-width': `calc(${filled}% + 2 * var(--slider-size))`,\n            '--slider-bar-offset': `calc(${offset}% - var(--slider-size))`,\n          }}\n          {...getStyles('bar')}\n        />\n\n        {children}\n\n        <Marks\n          {...others}\n          offset={marksOffset}\n          disabled={disabled}\n          inverted={inverted}\n          startPointValue={startPointValue}\n        />\n      </Box>\n    </Box>\n  );\n}\n\nTrack.displayName = '@mantine/core/SliderTrack';\n"],"mappings":";;;;;;;AAmBA,SAAgB,MAAM,EACpB,QACA,UACA,QACA,UACA,aACA,UACA,iBACA,gBACA,GAAG,UACU;CACb,MAAM,EAAE,cAAcA,uBAAAA,kBAAkB;AAExC,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,iBAAiB;EAAE,KAAK,EAAE,UAAU;EAAE,GAAI;YAC3D,iBAAA,GAAA,kBAAA,MAACA,YAAAA,KAAD;GAAK,GAAI,UAAU,QAAQ;GAAE,KAAK;IAAE;IAAU;IAAU;aAAxD;IACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;KACE,KAAK;MAAE;MAAU;MAAU;KAC3B,QAAQ;MACN,sBAAsB,QAAQ,OAAO;MACrC,uBAAuB,QAAQ,OAAO;MACvC;KACD,GAAI,UAAU,MAAM;KACpB,CAAA;IAED;IAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,OAAD;KACE,GAAI;KACJ,QAAQ;KACE;KACA;KACO;KACjB,CAAA;IACE;;EACF,CAAA;;AAIV,MAAM,cAAc"}

package/cjs/components/Tabs/Tabs.cjs

@@ -21,6 +21,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
 const defaultProps = {
 	keepMounted: true,
+	keepMountedMode: "activity",
 	orientation: "horizontal",
 	loop: true,
 	activateTabWithKeyboard: true,
@@ -38,7 +39,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 } }));
 const Tabs = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tabs", defaultProps, _props);
-	const { defaultValue, value, onChange, orientation, children, loop, id, activateTabWithKeyboard, allowTabDeactivation, variant, color, radius, inverted, placement, keepMounted, classNames, styles, unstyled, className, style, vars, autoContrast, mod, attributes, ...others } = props;
+	const { defaultValue, value, onChange, orientation, children, loop, id, activateTabWithKeyboard, allowTabDeactivation, variant, color, radius, inverted, placement, keepMounted, keepMountedMode, classNames, styles, unstyled, className, style, vars, autoContrast, mod, attributes, ...others } = props;
 	const uid = (0, _mantine_hooks.useId)(id);
 	const [currentTab, setCurrentTab] = (0, _mantine_hooks.useUncontrolled)({
 		value,
@@ -76,6 +77,7 @@ const Tabs = require_factory.factory((_props) => {
 			radius,
 			inverted,
 			keepMounted,
+			keepMountedMode,
 			unstyled,
 			getStyles
 		},

package/cjs/components/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","names":["createVarsResolver","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","TabsProvider","getSafeId","Box","classes","TabsTab","TabsPanel","TabsList"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSafeId,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n  | 'root'\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabsTabStylesNames;\n\nexport type TabsVariant = 'default' | 'outline' | 'pills';\nexport type TabsCssVariables = {\n  root: '--tabs-color' | '--tabs-radius';\n};\n\nexport interface TabsProps\n  extends\n    BoxProps,\n    StylesApiProps<TabsFactory>,\n    ElementProps<'div', 'defaultValue' | 'value' | 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: string | null;\n\n  /** Controlled component value */\n  value?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Tabs orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' */\n  placement?: 'left' | 'right';\n\n  /** Base id, used to generate ids to connect labels with controls, generated randomly by default */\n  id?: string;\n\n  /** If set, arrow key presses loop though items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** If set, tab is activated with arrow key press @default true */\n  activateTabWithKeyboard?: boolean;\n\n  /** If set, tab can be deactivated @default false */\n  allowTabDeactivation?: boolean;\n\n  /** Tabs content */\n  children?: React.ReactNode;\n\n  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Determines whether tabs should have inverted styles @default false */\n  inverted?: boolean;\n\n  /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */\n  keepMounted?: boolean;\n\n  /** If set, adjusts text color based on background color for `pills` variant */\n  autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n  props: TabsProps;\n  ref: HTMLDivElement;\n  variant: TabsVariant;\n  stylesNames: TabsStylesNames;\n  vars: TabsCssVariables;\n  staticComponents: {\n    Tab: typeof TabsTab;\n    Panel: typeof TabsPanel;\n    List: typeof TabsList;\n  };\n}>;\n\nconst VALUE_ERROR =\n  'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n  keepMounted: true,\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  variant: 'default',\n  placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n  root: {\n    '--tabs-radius': getRadius(radius),\n    '--tabs-color': getThemeColor(color, theme),\n    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n      ? getContrastColor({ color, theme, autoContrast })\n      : undefined,\n  },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n  const props = useProps('Tabs', defaultProps, _props);\n  const {\n    defaultValue,\n    value,\n    onChange,\n    orientation,\n    children,\n    loop,\n    id,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    variant,\n    color,\n    radius,\n    inverted,\n    placement,\n    keepMounted,\n    classNames,\n    styles,\n    unstyled,\n    className,\n    style,\n    vars,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n\n  const [currentTab, setCurrentTab] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const getStyles = useStyles<TabsFactory>({\n    name: 'Tabs',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TabsProvider\n      value={{\n        placement,\n        value: currentTab,\n        orientation,\n        id: uid,\n        loop,\n        activateTabWithKeyboard,\n        getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n        getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n        onChange: setCurrentTab,\n        allowTabDeactivation,\n        variant,\n        color,\n        radius,\n        inverted,\n        keepMounted,\n        unstyled,\n        getStyles,\n      }}\n    >\n      <Box\n        id={uid}\n        variant={variant}\n        mod={[\n          {\n            orientation,\n            inverted: orientation === 'horizontal' && inverted,\n            placement: orientation === 'vertical' && placement,\n          },\n          mod,\n        ]}\n        {...getStyles('root')}\n        {...others}\n      >\n        {children}\n      </Box>\n    </TabsProvider>\n  );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n  export type Props = TabsProps;\n  export type StylesNames = TabsStylesNames;\n  export type CssVariables = TabsCssVariables;\n  export type Factory = TabsFactory;\n  export type Variant = TabsVariant;\n  export type ContextValue = TabsContextValue;\n\n  export namespace Tab {\n    export type Props = TabsTabProps;\n    export type StylesNames = TabsTabStylesNames;\n  }\n\n  export namespace Panel {\n    export type Props = TabsPanelProps;\n    export type StylesNames = TabsPanelStylesNames;\n  }\n\n  export namespace List {\n    export type Props = TabsListProps;\n    export type StylesNames = TabsListStylesNames;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiBC,iBAAAA,UAAU,OAAO;CAClC,gBAAgBC,wBAAAA,cAAc,OAAO,MAAM;CAC3C,qBAAqBC,gCAAAA,qBAAqB,cAAc,MAAM,GAC1DC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;CAErB,MAAM,CAAC,YAAY,kBAAA,GAAA,eAAA,iBAAiC;EAClD;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAUC,oBAAAA,UAAU,GAAG,IAAI,OAAO,YAAY;GAC9C,YAAYA,oBAAAA,UAAU,GAAG,IAAI,SAAS,YAAY;GAClD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;IAC1C,EACD,IACD;GACD,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH;GACG,CAAA;EACO,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAMC,gBAAAA;AACX,KAAK,QAAQC,kBAAAA;AACb,KAAK,OAAOC,iBAAAA"}
+{"version":3,"file":"Tabs.cjs","names":["createVarsResolver","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","TabsProvider","getSafeId","Box","classes","TabsTab","TabsPanel","TabsList"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSafeId,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n  | 'root'\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabsTabStylesNames;\n\nexport type TabsVariant = 'default' | 'outline' | 'pills';\nexport type TabsCssVariables = {\n  root: '--tabs-color' | '--tabs-radius';\n};\n\nexport interface TabsProps\n  extends\n    BoxProps,\n    StylesApiProps<TabsFactory>,\n    ElementProps<'div', 'defaultValue' | 'value' | 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: string | null;\n\n  /** Controlled component value */\n  value?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Tabs orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' */\n  placement?: 'left' | 'right';\n\n  /** Base id, used to generate ids to connect labels with controls, generated randomly by default */\n  id?: string;\n\n  /** If set, arrow key presses loop though items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** If set, tab is activated with arrow key press @default true */\n  activateTabWithKeyboard?: boolean;\n\n  /** If set, tab can be deactivated @default false */\n  allowTabDeactivation?: boolean;\n\n  /** Tabs content */\n  children?: React.ReactNode;\n\n  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Determines whether tabs should have inverted styles @default false */\n  inverted?: boolean;\n\n  /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */\n  keepMounted?: boolean;\n\n  /** Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' */\n  keepMountedMode?: 'activity' | 'display-none';\n\n  /** If set, adjusts text color based on background color for `pills` variant */\n  autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n  props: TabsProps;\n  ref: HTMLDivElement;\n  variant: TabsVariant;\n  stylesNames: TabsStylesNames;\n  vars: TabsCssVariables;\n  staticComponents: {\n    Tab: typeof TabsTab;\n    Panel: typeof TabsPanel;\n    List: typeof TabsList;\n  };\n}>;\n\nconst VALUE_ERROR =\n  'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'activity',\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  variant: 'default',\n  placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n  root: {\n    '--tabs-radius': getRadius(radius),\n    '--tabs-color': getThemeColor(color, theme),\n    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n      ? getContrastColor({ color, theme, autoContrast })\n      : undefined,\n  },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n  const props = useProps('Tabs', defaultProps, _props);\n  const {\n    defaultValue,\n    value,\n    onChange,\n    orientation,\n    children,\n    loop,\n    id,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    variant,\n    color,\n    radius,\n    inverted,\n    placement,\n    keepMounted,\n    keepMountedMode,\n    classNames,\n    styles,\n    unstyled,\n    className,\n    style,\n    vars,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n\n  const [currentTab, setCurrentTab] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const getStyles = useStyles<TabsFactory>({\n    name: 'Tabs',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TabsProvider\n      value={{\n        placement,\n        value: currentTab,\n        orientation,\n        id: uid,\n        loop,\n        activateTabWithKeyboard,\n        getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n        getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n        onChange: setCurrentTab,\n        allowTabDeactivation,\n        variant,\n        color,\n        radius,\n        inverted,\n        keepMounted,\n        keepMountedMode,\n        unstyled,\n        getStyles,\n      }}\n    >\n      <Box\n        id={uid}\n        variant={variant}\n        mod={[\n          {\n            orientation,\n            inverted: orientation === 'horizontal' && inverted,\n            placement: orientation === 'vertical' && placement,\n          },\n          mod,\n        ]}\n        {...getStyles('root')}\n        {...others}\n      >\n        {children}\n      </Box>\n    </TabsProvider>\n  );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n  export type Props = TabsProps;\n  export type StylesNames = TabsStylesNames;\n  export type CssVariables = TabsCssVariables;\n  export type Factory = TabsFactory;\n  export type Variant = TabsVariant;\n  export type ContextValue = TabsContextValue;\n\n  export namespace Tab {\n    export type Props = TabsTabProps;\n    export type StylesNames = TabsTabStylesNames;\n  }\n\n  export namespace Panel {\n    export type Props = TabsPanelProps;\n    export type StylesNames = TabsPanelStylesNames;\n  }\n\n  export namespace List {\n    export type Props = TabsListProps;\n    export type StylesNames = TabsListStylesNames;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiBC,iBAAAA,UAAU,OAAO;CAClC,gBAAgBC,wBAAAA,cAAc,OAAO,MAAM;CAC3C,qBAAqBC,gCAAAA,qBAAqB,cAAc,MAAM,GAC1DC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;CAErB,MAAM,CAAC,YAAY,kBAAA,GAAA,eAAA,iBAAiC;EAClD;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAUC,oBAAAA,UAAU,GAAG,IAAI,OAAO,YAAY;GAC9C,YAAYA,oBAAAA,UAAU,GAAG,IAAI,SAAS,YAAY;GAClD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;IAC1C,EACD,IACD;GACD,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH;GACG,CAAA;EACO,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAMC,gBAAAA;AACX,KAAK,QAAQC,kBAAAA;AACb,KAAK,OAAOC,iBAAAA"}

package/cjs/components/Tabs/Tabs.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n  id: string;\n  value: string | null;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  loop: boolean | undefined;\n  activateTabWithKeyboard: boolean | undefined;\n  allowTabDeactivation: boolean | undefined;\n  onChange: (value: string | null) => void;\n  getTabId: (value: string) => string;\n  getPanelId: (value: string) => string;\n  variant: string | undefined;\n  color: string | undefined;\n  radius: string | number | undefined;\n  inverted: boolean | undefined;\n  keepMounted: boolean | undefined;\n  placement: 'right' | 'left' | undefined;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<TabsFactory>;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n  'Tabs component was not found in the tree'\n);\n"],"mappings":";;AAuBA,MAAa,CAAC,cAAc,0FAAkBA,kBAC5C,2CACD"}
+{"version":3,"file":"Tabs.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n  id: string;\n  value: string | null;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  loop: boolean | undefined;\n  activateTabWithKeyboard: boolean | undefined;\n  allowTabDeactivation: boolean | undefined;\n  onChange: (value: string | null) => void;\n  getTabId: (value: string) => string;\n  getPanelId: (value: string) => string;\n  variant: string | undefined;\n  color: string | undefined;\n  radius: string | number | undefined;\n  inverted: boolean | undefined;\n  keepMounted: boolean | undefined;\n  keepMountedMode: 'activity' | 'display-none' | undefined;\n  placement: 'right' | 'left' | undefined;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<TabsFactory>;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n  'Tabs component was not found in the tree'\n);\n"],"mappings":";;AAwBA,MAAa,CAAC,cAAc,0FAAkBA,kBAC5C,2CACD"}

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs

@@ -16,7 +16,8 @@ const TabsPanel = require_factory.factory((_props) => {
 	const ctx = require_Tabs_context.useTabsContext();
 	const active = ctx.value === value;
 	const shouldKeepMounted = ctx.keepMounted || keepMounted;
-	const content = shouldKeepMounted && env !== "test" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
+	const useActivity = ctx.keepMountedMode !== "display-none";
+	const content = shouldKeepMounted && useActivity && env !== "test" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
 		mode: active ? "visible" : "hidden",
 		children
 	}) : shouldKeepMounted ? children : active ? children : null;

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const content =\n    shouldKeepMounted && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,OAAO;CACjD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,MAAMC,qBAAAA,gBAAgB;CAE5B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,UACJ,qBAAqB,QAAQ,SAC3B,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;EAAoB,CAAA,GAClE,oBACF,WACE,SACF,WACE;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,QAAQ,GAAG,KAAA,EAAU;GACzD;GACD,CAAC;EACF,KAAK,CAAC,EAAE,aAAa,IAAI,aAAa,EAAE,IAAI;EAC5C,MAAK;EACL,IAAI,IAAI,WAAW,MAAM;EACzB,mBAAiB,IAAI,SAAS,MAAM;EACpC,GAAI;YAEH;EACG,CAAA;EAER;AAEF,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}
+{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const useActivity = ctx.keepMountedMode !== 'display-none';\n  const content =\n    shouldKeepMounted && useActivity && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,OAAO;CACjD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,MAAMC,qBAAAA,gBAAgB;CAE5B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;EAAoB,CAAA,GAClE,oBACF,WACE,SACF,WACE;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,QAAQ,GAAG,KAAA,EAAU;GACzD;GACD,CAAC;EACF,KAAK,CAAC,EAAE,aAAa,IAAI,aAAa,EAAE,IAAI;EAC5C,MAAK;EACL,IAAI,IAAI,WAAW,MAAM;EACzB,mBAAiB,IAAI,SAAS,MAAM;EACpC,GAAI;YAEH;EACG,CAAA;EAER;AAEF,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}

package/cjs/components/Tree/FlatTreeNode.cjs

@@ -0,0 +1,103 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_find_element_ancestor = require("../../core/utils/find-element-ancestor/find-element-ancestor.cjs");
+const require_Tree_module = require("./Tree.module.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Tree/FlatTreeNode.tsx
+const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1 }) {
+	const ref = (0, react.useRef)(null);
+	const isLoading = tree.isNodeLoading(node.value);
+	const loadError = tree.getNodeLoadError(node.value);
+	const selected = tree.selectedState.includes(node.value);
+	const handleClick = (event) => {
+		event.stopPropagation();
+		if (expandOnClick && hasChildren) tree.toggleExpanded(node.value);
+		if (selectOnClick) tree.select(node.value);
+		ref.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.code === "ArrowRight") {
+			event.stopPropagation();
+			event.preventDefault();
+			if (expanded && hasChildren) {
+				const root = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]");
+				const nodes = root ? Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none") : [];
+				const index = nodes.indexOf(event.currentTarget);
+				if (index !== -1) nodes[index + 1]?.focus();
+			} else if (hasChildren) tree.expand(node.value);
+		}
+		if (event.nativeEvent.code === "ArrowLeft") {
+			event.stopPropagation();
+			event.preventDefault();
+			if (expanded && hasChildren) tree.collapse(node.value);
+			else if (parent) (require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]")?.querySelector(`[role=treeitem][data-value="${CSS.escape(parent)}"]`))?.focus();
+		}
+		if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
+			const root = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]");
+			if (!root) return;
+			event.stopPropagation();
+			event.preventDefault();
+			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
+			const index = nodes.indexOf(event.currentTarget);
+			if (index === -1) return;
+			nodes[event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1]?.focus();
+		}
+		if (event.nativeEvent.code === "Space") {
+			if (expandOnSpace) {
+				event.stopPropagation();
+				event.preventDefault();
+				tree.toggleExpanded(node.value);
+			}
+			if (checkOnSpace) {
+				event.stopPropagation();
+				event.preventDefault();
+				if (tree.isNodeChecked(node.value)) tree.uncheckNode(node.value);
+				else tree.checkNode(node.value);
+			}
+		}
+	};
+	const elementProps = {
+		className: require_Tree_module.default.label,
+		style: {},
+		onClick: handleClick,
+		"data-selected": selected || void 0,
+		"data-value": node.value
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_Tree_module.default.node,
+		style: {
+			"--label-offset": `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,
+			...style
+		},
+		role: "treeitem",
+		"aria-selected": selected,
+		"aria-expanded": hasChildren ? expanded : void 0,
+		"data-value": node.value,
+		"data-selected": selected || void 0,
+		"data-level": level,
+		tabIndex,
+		onKeyDown: handleKeyDown,
+		children: typeof renderNode === "function" ? renderNode({
+			node,
+			level,
+			selected,
+			tree,
+			expanded,
+			hasChildren,
+			isLoading,
+			loadError,
+			elementProps,
+			dragHandleProps: void 0
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...elementProps,
+			children: node.label
+		})
+	});
+});
+FlatTreeNode.displayName = "@mantine/core/FlatTreeNode";
+//#endregion
+exports.FlatTreeNode = FlatTreeNode;
+
+//# sourceMappingURL=FlatTreeNode.cjs.map

package/cjs/components/Tree/FlatTreeNode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlatTreeNode.cjs","names":["findElementAncestor","classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n  /** Node data from tree data */\n  node: TreeNodeData;\n\n  /** Nesting level of the node, starts at 1 */\n  level: number;\n\n  /** Value of the parent node, `null` for root nodes */\n  parent: string | null;\n\n  /** Whether the node has children */\n  hasChildren: boolean;\n\n  /** Whether the node is expanded */\n  expanded: boolean;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** Style to apply to the root element, used for virtualizer positioning */\n  style?: React.CSSProperties;\n\n  /** Tab index for the node */\n  tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n  node,\n  level,\n  parent,\n  hasChildren,\n  expanded,\n  tree,\n  expandOnClick = true,\n  selectOnClick,\n  expandOnSpace = true,\n  checkOnSpace,\n  renderNode,\n  style,\n  tabIndex = -1,\n}: FlatTreeNodeProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const isLoading = tree.isNodeLoading(node.value);\n  const loadError = tree.getNodeLoadError(node.value);\n  const selected = tree.selectedState.includes(node.value);\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (expandOnClick && hasChildren) {\n      tree.toggleExpanded(node.value);\n    }\n\n    if (selectOnClick) {\n      tree.select(node.value);\n    }\n\n    ref.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const nodes = root\n          ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n              (treeNode) => treeNode.style.display !== 'none'\n            )\n          : [];\n        const index = nodes.indexOf(event.currentTarget as HTMLElement);\n        if (index !== -1) {\n          nodes[index + 1]?.focus();\n        }\n      } else if (hasChildren) {\n        tree.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        tree.collapse(node.value);\n      } else if (parent) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const parentElement = root?.querySelector<HTMLElement>(\n          `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n        );\n        parentElement?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        tree.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (tree.isNodeChecked(node.value)) {\n          tree.uncheckNode(node.value);\n        } else {\n          tree.checkNode(node.value);\n        }\n      }\n    }\n  };\n\n  const elementProps = {\n    className: classes.label,\n    style: {} as React.CSSProperties,\n    onClick: handleClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes.node}\n      style={{\n        ...({\n          '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,\n        } as React.CSSProperties),\n        ...style,\n      }}\n      role=\"treeitem\"\n      aria-selected={selected}\n      aria-expanded={hasChildren ? expanded : undefined}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={tabIndex}\n      onKeyDown={handleKeyDown}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree,\n          expanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n          dragHandleProps: undefined,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n    </div>\n  );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"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"}

package/cjs/components/Tree/Tree.cjs

@@ -28,9 +28,13 @@ const defaultProps = {
 const varsResolver = require_create_vars_resolver.createVarsResolver((_theme, { levelOffset }) => ({ root: { "--level-offset": require_get_size.getSpacing(levelOffset) } }));
 const Tree = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tree", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, attributes, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, withLines, attributes, ref, ...others } = props;
 	const defaultController = require_use_tree.useTree();
 	const controller = tree || defaultController;
+	const dragStateRef = (0, react.useRef)({
+		draggedValue: null,
+		currentDropTarget: null
+	});
 	const getStyles = require_use_styles.useStyles({
 		name: "Tree",
 		classes: require_Tree_module.default,
@@ -61,7 +65,12 @@ const Tree = require_factory.factory((_props) => {
 		allowRangeSelection,
 		expandOnSpace,
 		checkOnSpace,
-		keepMounted
+		keepMounted,
+		onDragDrop,
+		allowDrop,
+		withDragHandle,
+		dragStateRef,
+		data
 	}, node.value));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "ul",
@@ -71,6 +80,7 @@ const Tree = require_factory.factory((_props) => {
 		role: "tree",
 		"aria-multiselectable": controller.multiple,
 		"data-tree-root": true,
+		"data-with-lines": withLines || void 0,
 		children: nodes
 	});
 });

package/cjs/components/Tree/Tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TreeNode } from './TreeNode';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n  label: React.ReactNode;\n  value: string;\n  nodeProps?: Record<string, any>;\n  children?: TreeNodeData[];\n}\n\nexport interface RenderTreeNodePayload {\n  /** Node level in the tree */\n  level: number;\n\n  /** `true` if the node is expanded, applicable only for nodes with `children` */\n  expanded: boolean;\n\n  /** `true` if the node has non-empty `children` array */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\n\n  /** Node data from the `data` prop of `Tree` */\n  node: TreeNodeData;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** Props to spread into the root node element */\n  elementProps: {\n    className: string;\n    style: React.CSSProperties;\n    onClick: (event: React.MouseEvent) => void;\n    'data-selected': boolean | undefined;\n    'data-value': string;\n  };\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';\nexport type TreeCssVariables = {\n  root: '--level-offset';\n};\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n  /** Data used to render nodes */\n  data: TreeNodeData[];\n\n  /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */\n  levelOffset?: MantineSpacing;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** Use-tree hook instance that can be used to manipulate component state */\n  tree?: TreeController;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** If set, selection is cleared when user clicks outside of the tree @default false */\n  clearSelectionOnOutsideClick?: boolean;\n\n  /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */\n  allowRangeSelection?: boolean;\n\n  /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */\n  keepMounted?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n  return data.reduce<string[]>((acc, item) => {\n    acc.push(item.value);\n    if (item.children) {\n      acc.push(...getFlatValues(item.children));\n    }\n    return acc;\n  }, []);\n}\n\nexport type TreeFactory = Factory<{\n  props: TreeProps;\n  ref: HTMLUListElement;\n  stylesNames: TreeStylesNames;\n  vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n  expandOnClick: true,\n  allowRangeSelection: true,\n  expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n  root: {\n    '--level-offset': getSpacing(levelOffset),\n  },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n  const props = useProps('Tree', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    expandOnClick,\n    tree,\n    renderNode,\n    selectOnClick,\n    clearSelectionOnOutsideClick,\n    allowRangeSelection,\n    expandOnSpace,\n    levelOffset,\n    checkOnSpace,\n    keepMounted,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const defaultController = useTree();\n  const controller = tree || defaultController;\n\n  const getStyles = useStyles<TreeFactory>({\n    name: 'Tree',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const clickOutsideRef = useClickOutside(\n    () => clearSelectionOnOutsideClick && controller.clearSelected()\n  );\n\n  const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n  const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n  useEffect(() => {\n    controller.initialize(data);\n  }, [data]);\n\n  const nodes = data.map((node, index) => (\n    <TreeNode\n      key={node.value}\n      node={node}\n      getStyles={getStyles}\n      rootIndex={index}\n      expandOnClick={expandOnClick}\n      selectOnClick={selectOnClick}\n      controller={controller}\n      renderNode={renderNode}\n      flatValues={flatValues}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n    />\n  ));\n\n  return (\n    <Box\n      component=\"ul\"\n      ref={mergedRef}\n      {...getStyles('root')}\n      {...others}\n      role=\"tree\"\n      aria-multiselectable={controller.multiple}\n      data-tree-root\n    >\n      {nodes}\n    </Box>\n  );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n  export type Props = TreeProps;\n  export type StylesNames = TreeStylesNames;\n  export type Factory = TreeFactory;\n  export type NodeData = TreeNodeData;\n  export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiGA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACb,EAbK,KAAK,MAaV,CACF;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;YAEC;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}
+{"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n  label: React.ReactNode;\n  value: string;\n  nodeProps?: Record<string, any>;\n  children?: TreeNodeData[];\n  hasChildren?: boolean;\n}\n\nexport interface RenderTreeNodePayload {\n  /** Node level in the tree */\n  level: number;\n\n  /** `true` if the node is expanded, applicable only for nodes with `children` */\n  expanded: boolean;\n\n  /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\n\n  /** `true` if the node's children are currently being loaded */\n  isLoading: boolean;\n\n  /** Error from the last failed load attempt, or `null` */\n  loadError: Error | null;\n\n  /** Node data from the `data` prop of `Tree` */\n  node: TreeNodeData;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** Props to spread into the root node element */\n  elementProps: {\n    className: string;\n    style: React.CSSProperties;\n    onClick: (event: React.MouseEvent) => void;\n    'data-selected': boolean | undefined;\n    'data-value': string;\n    draggable?: boolean;\n    onDragStart?: (event: React.DragEvent) => void;\n    onDragOver?: (event: React.DragEvent) => void;\n    onDragLeave?: (event: React.DragEvent) => void;\n    onDrop?: (event: React.DragEvent) => void;\n    onDragEnd?: (event: React.DragEvent) => void;\n  };\n\n  /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.\n   * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. */\n  dragHandleProps: TreeDragHandleProps | undefined;\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';\nexport type TreeCssVariables = {\n  root: '--level-offset';\n};\n\nexport interface TreeDragState {\n  draggedValue: string | null;\n  currentDropTarget: HTMLElement | null;\n}\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n  /** Data used to render nodes */\n  data: TreeNodeData[];\n\n  /** Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' */\n  levelOffset?: MantineSpacing;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** Use-tree hook instance that can be used to manipulate component state */\n  tree?: TreeController;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** If set, selection is cleared when user clicks outside of the tree @default false */\n  clearSelectionOnOutsideClick?: boolean;\n\n  /** If set, tree nodes range can be selected with click when `Shift` key is pressed @default true */\n  allowRangeSelection?: boolean;\n\n  /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */\n  keepMounted?: boolean;\n\n  /** Called when a node is dropped on another node, enables drag-and-drop when provided */\n  onDragDrop?: (payload: TreeDragDropPayload) => void;\n\n  /** Called for each potential drop target to determine whether a drop is allowed.\n   * When it returns `false`, the drop indicator is hidden and the drop is rejected. */\n  allowDrop?: TreeAllowDrop;\n\n  /** If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`\n   * from the `renderNode` payload, rather than anywhere on the node. @default false */\n  withDragHandle?: boolean;\n\n  /** If set, connecting lines are rendered showing parent-child relationships @default false */\n  withLines?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n  return data.reduce<string[]>((acc, item) => {\n    acc.push(item.value);\n    if (item.children) {\n      acc.push(...getFlatValues(item.children));\n    }\n    return acc;\n  }, []);\n}\n\nexport type TreeFactory = Factory<{\n  props: TreeProps;\n  ref: HTMLUListElement;\n  stylesNames: TreeStylesNames;\n  vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n  expandOnClick: true,\n  allowRangeSelection: true,\n  expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n  root: {\n    '--level-offset': getSpacing(levelOffset),\n  },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n  const props = useProps('Tree', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    expandOnClick,\n    tree,\n    renderNode,\n    selectOnClick,\n    clearSelectionOnOutsideClick,\n    allowRangeSelection,\n    expandOnSpace,\n    levelOffset,\n    checkOnSpace,\n    keepMounted,\n    onDragDrop,\n    allowDrop,\n    withDragHandle,\n    withLines,\n    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const defaultController = useTree();\n  const controller = tree || defaultController;\n\n  const dragStateRef = useRef<TreeDragState>({ draggedValue: null, currentDropTarget: null });\n\n  const getStyles = useStyles<TreeFactory>({\n    name: 'Tree',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const clickOutsideRef = useClickOutside(\n    () => clearSelectionOnOutsideClick && controller.clearSelected()\n  );\n\n  const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n  const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n  useEffect(() => {\n    controller.initialize(data);\n  }, [data]);\n\n  const nodes = data.map((node, index) => (\n    <TreeNode\n      key={node.value}\n      node={node}\n      getStyles={getStyles}\n      rootIndex={index}\n      expandOnClick={expandOnClick}\n      selectOnClick={selectOnClick}\n      controller={controller}\n      renderNode={renderNode}\n      flatValues={flatValues}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  return (\n    <Box\n      component=\"ul\"\n      ref={mergedRef}\n      {...getStyles('root')}\n      {...others}\n      role=\"tree\"\n      aria-multiselectable={controller.multiple}\n      data-tree-root\n      data-with-lines={withLines || undefined}\n    >\n      {nodes}\n    </Box>\n  );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n  export type Props = TreeProps;\n  export type StylesNames = TreeStylesNames;\n  export type Factory = TreeFactory;\n  export type NodeData = TreeNodeData;\n  export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuIA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,gBACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,gBAAA,GAAA,MAAA,QAAqC;EAAE,cAAc;EAAM,mBAAmB;EAAM,CAAC;CAE3F,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACD;EACK;EACF;EACR;EACN,EAlBK,KAAK,MAkBV,CACF;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}