@mantine/core 9.6.2 → 9.7.0

package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs

@@ -0,0 +1,270 @@
+"use client";
+const require_rem = require("../../../core/utils/units-converters/rem.cjs");
+const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
+const require_Box = require("../../../core/Box/Box.cjs");
+const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
+const require_AppShell_context = require("../AppShell.context.cjs");
+const require_clamp_resize_size = require("../use-app-shell-resize/clamp-resize-size.cjs");
+const require_resize_section_config = require("../use-app-shell-resize/resize-section-config.cjs");
+const require_safe_area_inset = require("../use-app-shell-resize/safe-area-inset.cjs");
+let react = require("react");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.tsx
+const LABELS = {
+	navbar: "Resize navbar",
+	aside: "Resize aside",
+	header: "Resize header",
+	footer: "Resize footer"
+};
+const KEYBOARD_STEP = 10;
+const KEYBOARD_SHIFT_STEP = 50;
+const KEY_DELTAS = {
+	ArrowRight: {
+		deltaX: 1,
+		deltaY: 0
+	},
+	ArrowLeft: {
+		deltaX: -1,
+		deltaY: 0
+	},
+	ArrowDown: {
+		deltaX: 0,
+		deltaY: 1
+	},
+	ArrowUp: {
+		deltaX: 0,
+		deltaY: -1
+	}
+};
+function restoreBodyStyleProperty(property, value) {
+	if (value) document.body.style.setProperty(property, value);
+	else document.body.style.removeProperty(property);
+}
+function AppShellResizeHandle({ section, sectionId }) {
+	const ctx = require_AppShell_context.useAppShellContext();
+	const controller = ctx.resize;
+	const handleRef = (0, react.useRef)(null);
+	const dragRef = (0, react.useRef)({
+		startSize: 0,
+		startX: 0,
+		startY: 0,
+		size: 0,
+		moved: false
+	});
+	const activePointerIdRef = (0, react.useRef)(null);
+	const abortRef = (0, react.useRef)(null);
+	const previousBodyStylesRef = (0, react.useRef)(null);
+	const { dir } = require_DirectionProvider.useDirection();
+	const theme = require_MantineThemeProvider.useMantineTheme();
+	const config = require_resize_section_config.RESIZE_SECTIONS[section];
+	const options = controller?.options[section] ?? {};
+	const getViewportPx = () => config.axis === "horizontal" ? window.innerWidth : window.innerHeight;
+	const [viewportPx, setViewportPx] = (0, react.useState)(0);
+	const [measuredSize, setMeasuredSize] = (0, react.useState)(void 0);
+	const getViewportMax = () => getViewportPx() / theme.scale;
+	const measureSectionSize = (sectionElement) => {
+		const rect = sectionElement.getBoundingClientRect();
+		return ((config.axis === "horizontal" ? rect.width : rect.height) - require_safe_area_inset.getSafeAreaInset(sectionElement, config.safeAreaVariable)) / theme.scale;
+	};
+	const applyPreview = (size) => {
+		const root = ctx.rootRef.current;
+		if (!root) return;
+		const value = require_rem.rem(size);
+		root.style.setProperty(config.sizeVariable, value);
+		if (ctx.resizeOffsets[section]) root.style.setProperty(config.offsetVariable, value);
+		if (ctx.mode === "static" && config.gridWidthVariable) root.style.setProperty(config.gridWidthVariable, value);
+	};
+	const clearPreview = () => {
+		const root = ctx.rootRef.current;
+		if (!root) return;
+		root.style.removeProperty(config.sizeVariable);
+		root.style.removeProperty(config.offsetVariable);
+		if (config.gridWidthVariable) root.style.removeProperty(config.gridWidthVariable);
+	};
+	const stopListeners = () => {
+		abortRef.current?.abort();
+		abortRef.current = null;
+		activePointerIdRef.current = null;
+		const previousBodyStyles = previousBodyStylesRef.current;
+		previousBodyStylesRef.current = null;
+		if (previousBodyStyles) {
+			restoreBodyStyleProperty("user-select", previousBodyStyles.userSelect);
+			restoreBodyStyleProperty("-webkit-user-select", previousBodyStyles.webkitUserSelect);
+			restoreBodyStyleProperty("cursor", previousBodyStyles.cursor);
+		}
+	};
+	const cancelResize = () => {
+		controller?.reportCollapse(section, require_clamp_resize_size.getCollapseState(dragRef.current.startSize, options.collapseThreshold));
+		controller?.endResize(section, null);
+	};
+	const onPointerMove = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		dragRef.current.moved = true;
+		const delta = require_resize_section_config.getResizeDelta({
+			section,
+			deltaX: event.clientX - dragRef.current.startX,
+			deltaY: event.clientY - dragRef.current.startY,
+			dir
+		}) / theme.scale;
+		const rawSize = dragRef.current.startSize + delta;
+		const size = require_clamp_resize_size.clampResizeSize({
+			size: rawSize,
+			min: options.min,
+			max: options.max,
+			viewportMax: getViewportMax()
+		});
+		dragRef.current.size = size;
+		applyPreview(size);
+		handleRef.current?.setAttribute("aria-valuenow", String(Math.round(size)));
+		controller?.previewResize(section, size);
+		controller?.reportCollapse(section, require_clamp_resize_size.getCollapseState(rawSize, options.collapseThreshold));
+	};
+	const onPointerUp = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		stopListeners();
+		if (!dragRef.current.moved) {
+			controller?.endResize(section, null);
+			return;
+		}
+		controller?.endResize(section, dragRef.current.size);
+	};
+	const onPointerCancel = (event) => {
+		if (event.pointerId !== activePointerIdRef.current) return;
+		stopListeners();
+		clearPreview();
+		cancelResize();
+	};
+	const onDragKeyDown = (event) => {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		stopListeners();
+		clearPreview();
+		handleRef.current?.setAttribute("aria-valuenow", String(Math.round(dragRef.current.startSize)));
+		cancelResize();
+	};
+	const getCurrentSize = () => {
+		const size = controller?.[section].size;
+		if (size !== void 0) return size;
+		const sectionElement = handleRef.current?.parentElement;
+		if (!sectionElement) return 0;
+		return measureSectionSize(sectionElement);
+	};
+	const commitKeyboardSize = (size) => {
+		controller?.initCollapse(section, require_clamp_resize_size.getCollapseState(getCurrentSize(), options.collapseThreshold));
+		controller?.reportCollapse(section, require_clamp_resize_size.getCollapseState(size, options.collapseThreshold));
+		controller?.endResize(section, require_clamp_resize_size.clampResizeSize({
+			size,
+			min: options.min,
+			max: options.max,
+			viewportMax: getViewportMax()
+		}));
+	};
+	const onKeyDown = (event) => {
+		const step = event.shiftKey ? KEYBOARD_SHIFT_STEP : KEYBOARD_STEP;
+		if (event.key === "Home") {
+			event.preventDefault();
+			commitKeyboardSize(options.min ?? 0);
+			return;
+		}
+		if (event.key === "End") {
+			event.preventDefault();
+			commitKeyboardSize(options.max ?? getViewportMax());
+			return;
+		}
+		const keyDelta = KEY_DELTAS[event.key];
+		if (!keyDelta) return;
+		const direction = require_resize_section_config.getResizeDelta({
+			section,
+			...keyDelta,
+			dir
+		});
+		if (direction === 0) return;
+		event.preventDefault();
+		commitKeyboardSize(getCurrentSize() + direction * step);
+	};
+	const onDoubleClick = () => {
+		clearPreview();
+		controller?.[section].reset();
+	};
+	const onPointerDown = (event) => {
+		if (event.button !== 0) return;
+		if (abortRef.current !== null) return;
+		const sectionElement = handleRef.current?.parentElement;
+		if (!sectionElement) return;
+		const startSize = measureSectionSize(sectionElement);
+		dragRef.current = {
+			startSize,
+			startX: event.clientX,
+			startY: event.clientY,
+			size: startSize,
+			moved: false
+		};
+		activePointerIdRef.current = event.pointerId;
+		controller?.initCollapse(section, require_clamp_resize_size.getCollapseState(startSize, options.collapseThreshold));
+		const abortController = new AbortController();
+		abortRef.current = abortController;
+		const { signal } = abortController;
+		previousBodyStylesRef.current = {
+			userSelect: document.body.style.getPropertyValue("user-select"),
+			webkitUserSelect: document.body.style.getPropertyValue("-webkit-user-select"),
+			cursor: document.body.style.getPropertyValue("cursor")
+		};
+		document.body.style.setProperty("user-select", "none");
+		document.body.style.setProperty("-webkit-user-select", "none");
+		document.body.style.setProperty("cursor", config.axis === "horizontal" ? "col-resize" : "row-resize");
+		controller?.startResize(section);
+		document.addEventListener("pointermove", onPointerMove, { signal });
+		document.addEventListener("pointerup", onPointerUp, { signal });
+		document.addEventListener("pointercancel", onPointerCancel, { signal });
+		document.addEventListener("keydown", onDragKeyDown, { signal });
+	};
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (controller && controller.activeSection !== section) clearPreview();
+	}, [controller?.activeSection, controller?.[section].size]);
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		setViewportPx(getViewportPx());
+		const handleWindowResize = () => setViewportPx(getViewportPx());
+		window.addEventListener("resize", handleWindowResize);
+		return () => window.removeEventListener("resize", handleWindowResize);
+	}, [config.axis]);
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (controller?.[section].size === void 0) setMeasuredSize(getCurrentSize());
+	}, [controller?.[section].size, viewportPx]);
+	(0, _mantine_hooks.useIsomorphicEffect)(() => () => {
+		const wasDragging = abortRef.current !== null;
+		stopListeners();
+		clearPreview();
+		if (wasDragging) cancelResize();
+	}, []);
+	if (!controller?.[section].enabled) return null;
+	const viewportMax = viewportPx / theme.scale;
+	const effectiveMax = Math.min(options.max ?? viewportMax, viewportMax);
+	const committedSize = controller[section].size;
+	const currentValue = committedSize !== void 0 && viewportPx > 0 ? Math.min(committedSize, viewportMax) : committedSize ?? measuredSize;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		ref: handleRef,
+		role: "separator",
+		tabIndex: 0,
+		"aria-label": options.label ?? LABELS[section],
+		"aria-controls": sectionId,
+		"aria-orientation": config.orientation,
+		"aria-valuemin": options.min ?? 0,
+		"aria-valuemax": Math.round(effectiveMax),
+		"aria-valuenow": currentValue !== void 0 ? Math.round(currentValue) : void 0,
+		onPointerDown,
+		onKeyDown,
+		onDoubleClick,
+		mod: {
+			section,
+			orientation: config.orientation,
+			active: controller[section].active
+		},
+		...ctx.getStyles("resizeHandle")
+	});
+}
+AppShellResizeHandle.displayName = "@mantine/core/AppShellResizeHandle";
+//#endregion
+exports.AppShellResizeHandle = AppShellResizeHandle;
+
+//# sourceMappingURL=AppShellResizeHandle.cjs.map

package/cjs/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellResizeHandle.cjs","names":["useAppShellContext","useRef","useDirection","useMantineTheme","RESIZE_SECTIONS","useState","getSafeAreaInset","rem","getCollapseState","getResizeDelta","clampResizeSize","Box"],"sources":["../../../../src/components/AppShell/AppShellResizeHandle/AppShellResizeHandle.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\nimport { Box, rem, useDirection, useMantineTheme } from '../../../core';\nimport { useAppShellContext } from '../AppShell.context';\nimport type { AppShellResizeSection } from '../AppShell.types';\nimport { clampResizeSize, getCollapseState } from '../use-app-shell-resize/clamp-resize-size';\nimport { getResizeDelta, RESIZE_SECTIONS } from '../use-app-shell-resize/resize-section-config';\nimport { getSafeAreaInset } from '../use-app-shell-resize/safe-area-inset';\n\ninterface AppShellResizeHandleProps {\n  section: AppShellResizeSection;\n  sectionId: string;\n}\n\nconst LABELS: Record<AppShellResizeSection, string> = {\n  navbar: 'Resize navbar',\n  aside: 'Resize aside',\n  header: 'Resize header',\n  footer: 'Resize footer',\n};\n\nconst KEYBOARD_STEP = 10;\nconst KEYBOARD_SHIFT_STEP = 50;\n\nconst KEY_DELTAS: Record<string, { deltaX: number; deltaY: number }> = {\n  ArrowRight: { deltaX: 1, deltaY: 0 },\n  ArrowLeft: { deltaX: -1, deltaY: 0 },\n  ArrowDown: { deltaX: 0, deltaY: 1 },\n  ArrowUp: { deltaX: 0, deltaY: -1 },\n};\n\ninterface PreviousBodyStyles {\n  userSelect: string;\n  webkitUserSelect: string;\n  cursor: string;\n}\n\nfunction restoreBodyStyleProperty(property: string, value: string) {\n  if (value) {\n    document.body.style.setProperty(property, value);\n  } else {\n    document.body.style.removeProperty(property);\n  }\n}\n\nexport function AppShellResizeHandle({ section, sectionId }: AppShellResizeHandleProps) {\n  const ctx = useAppShellContext();\n  const controller = ctx.resize;\n\n  const handleRef = useRef<HTMLDivElement>(null);\n  const dragRef = useRef({ startSize: 0, startX: 0, startY: 0, size: 0, moved: false });\n  const activePointerIdRef = useRef<number | null>(null);\n  const abortRef = useRef<AbortController | null>(null);\n  const previousBodyStylesRef = useRef<PreviousBodyStyles | null>(null);\n  const { dir } = useDirection();\n  const theme = useMantineTheme();\n\n  const config = RESIZE_SECTIONS[section];\n  const options = controller?.options[section] ?? {};\n\n  const getViewportPx = () =>\n    config.axis === 'horizontal' ? window.innerWidth : window.innerHeight;\n\n  const [viewportPx, setViewportPx] = useState(0);\n  const [measuredSize, setMeasuredSize] = useState<number | undefined>(undefined);\n\n  const getViewportMax = () => getViewportPx() / theme.scale;\n\n  const measureSectionSize = (sectionElement: HTMLElement) => {\n    const rect = sectionElement.getBoundingClientRect();\n    const rawSize = config.axis === 'horizontal' ? rect.width : rect.height;\n    const safeAreaInset = getSafeAreaInset(sectionElement, config.safeAreaVariable);\n    return (rawSize - safeAreaInset) / theme.scale;\n  };\n\n  const applyPreview = (size: number) => {\n    const root = ctx.rootRef.current;\n    if (!root) {\n      return;\n    }\n\n    const value = rem(size);\n    root.style.setProperty(config.sizeVariable, value);\n\n    if (ctx.resizeOffsets[section]) {\n      root.style.setProperty(config.offsetVariable, value);\n    }\n\n    if (ctx.mode === 'static' && config.gridWidthVariable) {\n      root.style.setProperty(config.gridWidthVariable, value);\n    }\n  };\n\n  const clearPreview = () => {\n    const root = ctx.rootRef.current;\n    if (!root) {\n      return;\n    }\n\n    root.style.removeProperty(config.sizeVariable);\n    root.style.removeProperty(config.offsetVariable);\n    if (config.gridWidthVariable) {\n      root.style.removeProperty(config.gridWidthVariable);\n    }\n  };\n\n  const stopListeners = () => {\n    abortRef.current?.abort();\n    abortRef.current = null;\n    activePointerIdRef.current = null;\n\n    const previousBodyStyles = previousBodyStylesRef.current;\n    previousBodyStylesRef.current = null;\n    if (previousBodyStyles) {\n      restoreBodyStyleProperty('user-select', previousBodyStyles.userSelect);\n      restoreBodyStyleProperty('-webkit-user-select', previousBodyStyles.webkitUserSelect);\n      restoreBodyStyleProperty('cursor', previousBodyStyles.cursor);\n    }\n  };\n\n  const cancelResize = () => {\n    controller?.reportCollapse(\n      section,\n      getCollapseState(dragRef.current.startSize, options.collapseThreshold)\n    );\n    controller?.endResize(section, null);\n  };\n\n  const onPointerMove = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    dragRef.current.moved = true;\n\n    const delta =\n      getResizeDelta({\n        section,\n        deltaX: event.clientX - dragRef.current.startX,\n        deltaY: event.clientY - dragRef.current.startY,\n        dir,\n      }) / theme.scale;\n\n    const rawSize = dragRef.current.startSize + delta;\n    const size = clampResizeSize({\n      size: rawSize,\n      min: options.min,\n      max: options.max,\n      viewportMax: getViewportMax(),\n    });\n\n    dragRef.current.size = size;\n    applyPreview(size);\n    handleRef.current?.setAttribute('aria-valuenow', String(Math.round(size)));\n    controller?.previewResize(section, size);\n    controller?.reportCollapse(section, getCollapseState(rawSize, options.collapseThreshold));\n  };\n\n  const onPointerUp = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    stopListeners();\n\n    if (!dragRef.current.moved) {\n      controller?.endResize(section, null);\n      return;\n    }\n\n    controller?.endResize(section, dragRef.current.size);\n  };\n\n  const onPointerCancel = (event: PointerEvent) => {\n    if (event.pointerId !== activePointerIdRef.current) {\n      return;\n    }\n\n    stopListeners();\n    clearPreview();\n    cancelResize();\n  };\n\n  const onDragKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Escape') {\n      return;\n    }\n\n    event.preventDefault();\n    stopListeners();\n    clearPreview();\n    handleRef.current?.setAttribute('aria-valuenow', String(Math.round(dragRef.current.startSize)));\n    cancelResize();\n  };\n\n  const getCurrentSize = () => {\n    const size = controller?.[section].size;\n    if (size !== undefined) {\n      return size;\n    }\n\n    const sectionElement = handleRef.current?.parentElement;\n    if (!sectionElement) {\n      return 0;\n    }\n\n    return measureSectionSize(sectionElement);\n  };\n\n  const commitKeyboardSize = (size: number) => {\n    controller?.initCollapse(\n      section,\n      getCollapseState(getCurrentSize(), options.collapseThreshold)\n    );\n    controller?.reportCollapse(section, getCollapseState(size, options.collapseThreshold));\n    controller?.endResize(\n      section,\n      clampResizeSize({\n        size,\n        min: options.min,\n        max: options.max,\n        viewportMax: getViewportMax(),\n      })\n    );\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? KEYBOARD_SHIFT_STEP : KEYBOARD_STEP;\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      commitKeyboardSize(options.min ?? 0);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      commitKeyboardSize(options.max ?? getViewportMax());\n      return;\n    }\n\n    const keyDelta = KEY_DELTAS[event.key];\n    if (!keyDelta) {\n      return;\n    }\n\n    const direction = getResizeDelta({ section, ...keyDelta, dir });\n    if (direction === 0) {\n      return;\n    }\n\n    event.preventDefault();\n    commitKeyboardSize(getCurrentSize() + direction * step);\n  };\n\n  const onDoubleClick = () => {\n    clearPreview();\n    controller?.[section].reset();\n  };\n\n  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) {\n      return;\n    }\n\n    if (abortRef.current !== null) {\n      return;\n    }\n\n    const sectionElement = handleRef.current?.parentElement;\n    if (!sectionElement) {\n      return;\n    }\n\n    const startSize = measureSectionSize(sectionElement);\n    dragRef.current = {\n      startSize,\n      startX: event.clientX,\n      startY: event.clientY,\n      size: startSize,\n      moved: false,\n    };\n    activePointerIdRef.current = event.pointerId;\n    controller?.initCollapse(section, getCollapseState(startSize, options.collapseThreshold));\n\n    const abortController = new AbortController();\n    abortRef.current = abortController;\n    const { signal } = abortController;\n\n    previousBodyStylesRef.current = {\n      userSelect: document.body.style.getPropertyValue('user-select'),\n      webkitUserSelect: document.body.style.getPropertyValue('-webkit-user-select'),\n      cursor: document.body.style.getPropertyValue('cursor'),\n    };\n    document.body.style.setProperty('user-select', 'none');\n    document.body.style.setProperty('-webkit-user-select', 'none');\n    document.body.style.setProperty(\n      'cursor',\n      config.axis === 'horizontal' ? 'col-resize' : 'row-resize'\n    );\n    controller?.startResize(section);\n\n    document.addEventListener('pointermove', onPointerMove, { signal });\n    document.addEventListener('pointerup', onPointerUp, { signal });\n    document.addEventListener('pointercancel', onPointerCancel, { signal });\n    document.addEventListener('keydown', onDragKeyDown, { signal });\n  };\n\n  useIsomorphicEffect(() => {\n    if (controller && controller.activeSection !== section) {\n      clearPreview();\n    }\n  }, [controller?.activeSection, controller?.[section].size]);\n\n  useIsomorphicEffect(() => {\n    setViewportPx(getViewportPx());\n\n    const handleWindowResize = () => setViewportPx(getViewportPx());\n    window.addEventListener('resize', handleWindowResize);\n    return () => window.removeEventListener('resize', handleWindowResize);\n  }, [config.axis]);\n\n  useIsomorphicEffect(() => {\n    if (controller?.[section].size === undefined) {\n      setMeasuredSize(getCurrentSize());\n    }\n  }, [controller?.[section].size, viewportPx]);\n\n  useIsomorphicEffect(\n    () => () => {\n      const wasDragging = abortRef.current !== null;\n      stopListeners();\n      clearPreview();\n\n      if (wasDragging) {\n        cancelResize();\n      }\n    },\n    []\n  );\n\n  if (!controller?.[section].enabled) {\n    return null;\n  }\n\n  const viewportMax = viewportPx / theme.scale;\n  const effectiveMax = Math.min(options.max ?? viewportMax, viewportMax);\n  const committedSize = controller[section].size;\n  const currentValue =\n    committedSize !== undefined && viewportPx > 0\n      ? Math.min(committedSize, viewportMax)\n      : (committedSize ?? measuredSize);\n\n  return (\n    <Box\n      ref={handleRef}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={options.label ?? LABELS[section]}\n      aria-controls={sectionId}\n      aria-orientation={config.orientation}\n      aria-valuemin={options.min ?? 0}\n      aria-valuemax={Math.round(effectiveMax)}\n      aria-valuenow={currentValue !== undefined ? Math.round(currentValue) : undefined}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n      onDoubleClick={onDoubleClick}\n      mod={{ section, orientation: config.orientation, active: controller[section].active }}\n      {...ctx.getStyles('resizeHandle')}\n    />\n  );\n}\n\nAppShellResizeHandle.displayName = '@mantine/core/AppShellResizeHandle';\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,SAAgD;CACpD,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,QAAQ;AACV;AAEA,MAAM,gBAAgB;AACtB,MAAM,sBAAsB;AAE5B,MAAM,aAAiE;CACrE,YAAY;EAAE,QAAQ;EAAG,QAAQ;CAAE;CACnC,WAAW;EAAE,QAAQ;EAAI,QAAQ;CAAE;CACnC,WAAW;EAAE,QAAQ;EAAG,QAAQ;CAAE;CAClC,SAAS;EAAE,QAAQ;EAAG,QAAQ;CAAG;AACnC;AAQA,SAAS,yBAAyB,UAAkB,OAAe;CACjE,IAAI,OACF,SAAS,KAAK,MAAM,YAAY,UAAU,KAAK;MAE/C,SAAS,KAAK,MAAM,eAAe,QAAQ;AAE/C;AAEA,SAAgB,qBAAqB,EAAE,SAAS,aAAwC;CACtF,MAAM,MAAMA,yBAAAA,mBAAmB;CAC/B,MAAM,aAAa,IAAI;CAEvB,MAAM,aAAA,GAAYC,MAAAA,OAAAA,CAAuB,IAAI;CAC7C,MAAM,WAAA,GAAUA,MAAAA,OAAAA,CAAO;EAAE,WAAW;EAAG,QAAQ;EAAG,QAAQ;EAAG,MAAM;EAAG,OAAO;CAAM,CAAC;CACpF,MAAM,sBAAA,GAAqBA,MAAAA,OAAAA,CAAsB,IAAI;CACrD,MAAM,YAAA,GAAWA,MAAAA,OAAAA,CAA+B,IAAI;CACpD,MAAM,yBAAA,GAAwBA,MAAAA,OAAAA,CAAkC,IAAI;CACpE,MAAM,EAAE,QAAQC,0BAAAA,aAAa;CAC7B,MAAM,QAAQC,6BAAAA,gBAAgB;CAE9B,MAAM,SAASC,8BAAAA,gBAAgB;CAC/B,MAAM,UAAU,YAAY,QAAQ,YAAY,CAAC;CAEjD,MAAM,sBACJ,OAAO,SAAS,eAAe,OAAO,aAAa,OAAO;CAE5D,MAAM,CAAC,YAAY,kBAAA,GAAiBC,MAAAA,SAAAA,CAAS,CAAC;CAC9C,MAAM,CAAC,cAAc,oBAAA,GAAmBA,MAAAA,SAAAA,CAA6B,KAAA,CAAS;CAE9E,MAAM,uBAAuB,cAAc,IAAI,MAAM;CAErD,MAAM,sBAAsB,mBAAgC;EAC1D,MAAM,OAAO,eAAe,sBAAsB;EAGlD,SAFgB,OAAO,SAAS,eAAe,KAAK,QAAQ,KAAK,UAC3CC,wBAAAA,iBAAiB,gBAAgB,OAAO,gBAChC,KAAK,MAAM;CAC3C;CAEA,MAAM,gBAAgB,SAAiB;EACrC,MAAM,OAAO,IAAI,QAAQ;EACzB,IAAI,CAAC,MACH;EAGF,MAAM,QAAQC,YAAAA,IAAI,IAAI;EACtB,KAAK,MAAM,YAAY,OAAO,cAAc,KAAK;EAEjD,IAAI,IAAI,cAAc,UACpB,KAAK,MAAM,YAAY,OAAO,gBAAgB,KAAK;EAGrD,IAAI,IAAI,SAAS,YAAY,OAAO,mBAClC,KAAK,MAAM,YAAY,OAAO,mBAAmB,KAAK;CAE1D;CAEA,MAAM,qBAAqB;EACzB,MAAM,OAAO,IAAI,QAAQ;EACzB,IAAI,CAAC,MACH;EAGF,KAAK,MAAM,eAAe,OAAO,YAAY;EAC7C,KAAK,MAAM,eAAe,OAAO,cAAc;EAC/C,IAAI,OAAO,mBACT,KAAK,MAAM,eAAe,OAAO,iBAAiB;CAEtD;CAEA,MAAM,sBAAsB;EAC1B,SAAS,SAAS,MAAM;EACxB,SAAS,UAAU;EACnB,mBAAmB,UAAU;EAE7B,MAAM,qBAAqB,sBAAsB;EACjD,sBAAsB,UAAU;EAChC,IAAI,oBAAoB;GACtB,yBAAyB,eAAe,mBAAmB,UAAU;GACrE,yBAAyB,uBAAuB,mBAAmB,gBAAgB;GACnF,yBAAyB,UAAU,mBAAmB,MAAM;EAC9D;CACF;CAEA,MAAM,qBAAqB;EACzB,YAAY,eACV,SACAC,0BAAAA,iBAAiB,QAAQ,QAAQ,WAAW,QAAQ,iBAAiB,CACvE;EACA,YAAY,UAAU,SAAS,IAAI;CACrC;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,IAAI,MAAM,cAAc,mBAAmB,SACzC;EAGF,QAAQ,QAAQ,QAAQ;EAExB,MAAM,QACJC,8BAAAA,eAAe;GACb;GACA,QAAQ,MAAM,UAAU,QAAQ,QAAQ;GACxC,QAAQ,MAAM,UAAU,QAAQ,QAAQ;GACxC;EACF,CAAC,IAAI,MAAM;EAEb,MAAM,UAAU,QAAQ,QAAQ,YAAY;EAC5C,MAAM,OAAOC,0BAAAA,gBAAgB;GAC3B,MAAM;GACN,KAAK,QAAQ;GACb,KAAK,QAAQ;GACb,aAAa,eAAe;EAC9B,CAAC;EAED,QAAQ,QAAQ,OAAO;EACvB,aAAa,IAAI;EACjB,UAAU,SAAS,aAAa,iBAAiB,OAAO,KAAK,MAAM,IAAI,CAAC,CAAC;EACzE,YAAY,cAAc,SAAS,IAAI;EACvC,YAAY,eAAe,SAASF,0BAAAA,iBAAiB,SAAS,QAAQ,iBAAiB,CAAC;CAC1F;CAEA,MAAM,eAAe,UAAwB;EAC3C,IAAI,MAAM,cAAc,mBAAmB,SACzC;EAGF,cAAc;EAEd,IAAI,CAAC,QAAQ,QAAQ,OAAO;GAC1B,YAAY,UAAU,SAAS,IAAI;GACnC;EACF;EAEA,YAAY,UAAU,SAAS,QAAQ,QAAQ,IAAI;CACrD;CAEA,MAAM,mBAAmB,UAAwB;EAC/C,IAAI,MAAM,cAAc,mBAAmB,SACzC;EAGF,cAAc;EACd,aAAa;EACb,aAAa;CACf;CAEA,MAAM,iBAAiB,UAAyB;EAC9C,IAAI,MAAM,QAAQ,UAChB;EAGF,MAAM,eAAe;EACrB,cAAc;EACd,aAAa;EACb,UAAU,SAAS,aAAa,iBAAiB,OAAO,KAAK,MAAM,QAAQ,QAAQ,SAAS,CAAC,CAAC;EAC9F,aAAa;CACf;CAEA,MAAM,uBAAuB;EAC3B,MAAM,OAAO,aAAa,QAAQ,CAAC;EACnC,IAAI,SAAS,KAAA,GACX,OAAO;EAGT,MAAM,iBAAiB,UAAU,SAAS;EAC1C,IAAI,CAAC,gBACH,OAAO;EAGT,OAAO,mBAAmB,cAAc;CAC1C;CAEA,MAAM,sBAAsB,SAAiB;EAC3C,YAAY,aACV,SACAA,0BAAAA,iBAAiB,eAAe,GAAG,QAAQ,iBAAiB,CAC9D;EACA,YAAY,eAAe,SAASA,0BAAAA,iBAAiB,MAAM,QAAQ,iBAAiB,CAAC;EACrF,YAAY,UACV,SACAE,0BAAAA,gBAAgB;GACd;GACA,KAAK,QAAQ;GACb,KAAK,QAAQ;GACb,aAAa,eAAe;EAC9B,CAAC,CACH;CACF;CAEA,MAAM,aAAa,UAA+C;EAChE,MAAM,OAAO,MAAM,WAAW,sBAAsB;EAEpD,IAAI,MAAM,QAAQ,QAAQ;GACxB,MAAM,eAAe;GACrB,mBAAmB,QAAQ,OAAO,CAAC;GACnC;EACF;EAEA,IAAI,MAAM,QAAQ,OAAO;GACvB,MAAM,eAAe;GACrB,mBAAmB,QAAQ,OAAO,eAAe,CAAC;GAClD;EACF;EAEA,MAAM,WAAW,WAAW,MAAM;EAClC,IAAI,CAAC,UACH;EAGF,MAAM,YAAYD,8BAAAA,eAAe;GAAE;GAAS,GAAG;GAAU;EAAI,CAAC;EAC9D,IAAI,cAAc,GAChB;EAGF,MAAM,eAAe;EACrB,mBAAmB,eAAe,IAAI,YAAY,IAAI;CACxD;CAEA,MAAM,sBAAsB;EAC1B,aAAa;EACb,aAAa,QAAQ,CAAC,MAAM;CAC9B;CAEA,MAAM,iBAAiB,UAA8C;EACnE,IAAI,MAAM,WAAW,GACnB;EAGF,IAAI,SAAS,YAAY,MACvB;EAGF,MAAM,iBAAiB,UAAU,SAAS;EAC1C,IAAI,CAAC,gBACH;EAGF,MAAM,YAAY,mBAAmB,cAAc;EACnD,QAAQ,UAAU;GAChB;GACA,QAAQ,MAAM;GACd,QAAQ,MAAM;GACd,MAAM;GACN,OAAO;EACT;EACA,mBAAmB,UAAU,MAAM;EACnC,YAAY,aAAa,SAASD,0BAAAA,iBAAiB,WAAW,QAAQ,iBAAiB,CAAC;EAExF,MAAM,kBAAkB,IAAI,gBAAgB;EAC5C,SAAS,UAAU;EACnB,MAAM,EAAE,WAAW;EAEnB,sBAAsB,UAAU;GAC9B,YAAY,SAAS,KAAK,MAAM,iBAAiB,aAAa;GAC9D,kBAAkB,SAAS,KAAK,MAAM,iBAAiB,qBAAqB;GAC5E,QAAQ,SAAS,KAAK,MAAM,iBAAiB,QAAQ;EACvD;EACA,SAAS,KAAK,MAAM,YAAY,eAAe,MAAM;EACrD,SAAS,KAAK,MAAM,YAAY,uBAAuB,MAAM;EAC7D,SAAS,KAAK,MAAM,YAClB,UACA,OAAO,SAAS,eAAe,eAAe,YAChD;EACA,YAAY,YAAY,OAAO;EAE/B,SAAS,iBAAiB,eAAe,eAAe,EAAE,OAAO,CAAC;EAClE,SAAS,iBAAiB,aAAa,aAAa,EAAE,OAAO,CAAC;EAC9D,SAAS,iBAAiB,iBAAiB,iBAAiB,EAAE,OAAO,CAAC;EACtE,SAAS,iBAAiB,WAAW,eAAe,EAAE,OAAO,CAAC;CAChE;CAEA,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,IAAI,cAAc,WAAW,kBAAkB,SAC7C,aAAa;CAEjB,GAAG,CAAC,YAAY,eAAe,aAAa,QAAQ,CAAC,IAAI,CAAC;CAE1D,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,cAAc,cAAc,CAAC;EAE7B,MAAM,2BAA2B,cAAc,cAAc,CAAC;EAC9D,OAAO,iBAAiB,UAAU,kBAAkB;EACpD,aAAa,OAAO,oBAAoB,UAAU,kBAAkB;CACtE,GAAG,CAAC,OAAO,IAAI,CAAC;CAEhB,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,IAAI,aAAa,QAAQ,CAAC,SAAS,KAAA,GACjC,gBAAgB,eAAe,CAAC;CAEpC,GAAG,CAAC,aAAa,QAAQ,CAAC,MAAM,UAAU,CAAC;CAE3C,CAAA,GAAA,eAAA,oBAAA,aACc;EACV,MAAM,cAAc,SAAS,YAAY;EACzC,cAAc;EACd,aAAa;EAEb,IAAI,aACF,aAAa;CAEjB,GACA,CAAC,CACH;CAEA,IAAI,CAAC,aAAa,QAAQ,CAAC,SACzB,OAAO;CAGT,MAAM,cAAc,aAAa,MAAM;CACvC,MAAM,eAAe,KAAK,IAAI,QAAQ,OAAO,aAAa,WAAW;CACrE,MAAM,gBAAgB,WAAW,QAAQ,CAAC;CAC1C,MAAM,eACJ,kBAAkB,KAAA,KAAa,aAAa,IACxC,KAAK,IAAI,eAAe,WAAW,IAClC,iBAAiB;CAExB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,YAAAA,KAAD;EACE,KAAK;EACL,MAAK;EACL,UAAU;EACV,cAAY,QAAQ,SAAS,OAAO;EACpC,iBAAe;EACf,oBAAkB,OAAO;EACzB,iBAAe,QAAQ,OAAO;EAC9B,iBAAe,KAAK,MAAM,YAAY;EACtC,iBAAe,iBAAiB,KAAA,IAAY,KAAK,MAAM,YAAY,IAAI,KAAA;EACxD;EACJ;EACI;EACf,KAAK;GAAE;GAAS,aAAa,OAAO;GAAa,QAAQ,WAAW,QAAQ,CAAC;EAAO;EACpF,GAAI,IAAI,UAAU,cAAc;CACjC,CAAA;AAEL;AAEA,qBAAqB,cAAc"}

package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs

@@ -0,0 +1,15 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/clamp-resize-size.ts
+function clampResizeSize({ size, min, max, viewportMax }) {
+	const upperBound = Math.min(max ?? Number.POSITIVE_INFINITY, viewportMax);
+	return Math.max(Math.min(min ?? 0, upperBound), Math.min(size, upperBound));
+}
+function getCollapseState(size, collapseThreshold) {
+	if (collapseThreshold === void 0) return false;
+	return size < collapseThreshold;
+}
+//#endregion
+exports.clampResizeSize = clampResizeSize;
+exports.getCollapseState = getCollapseState;
+
+//# sourceMappingURL=clamp-resize-size.cjs.map

package/cjs/components/AppShell/use-app-shell-resize/clamp-resize-size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"clamp-resize-size.cjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/clamp-resize-size.ts"],"sourcesContent":["interface ClampResizeSizeInput {\n  size: number;\n  min: number | undefined;\n  max: number | undefined;\n  viewportMax: number;\n}\n\nexport function clampResizeSize({ size, min, max, viewportMax }: ClampResizeSizeInput) {\n  const upperBound = Math.min(max ?? Number.POSITIVE_INFINITY, viewportMax);\n  const lowerBound = Math.min(min ?? 0, upperBound);\n  return Math.max(lowerBound, Math.min(size, upperBound));\n}\n\nexport function getCollapseState(size: number, collapseThreshold: number | undefined) {\n  if (collapseThreshold === undefined) {\n    return false;\n  }\n\n  return size < collapseThreshold;\n}\n"],"mappings":";;AAOA,SAAgB,gBAAgB,EAAE,MAAM,KAAK,KAAK,eAAqC;CACrF,MAAM,aAAa,KAAK,IAAI,OAAO,OAAO,mBAAmB,WAAW;CAExE,OAAO,KAAK,IADO,KAAK,IAAI,OAAO,GAAG,UACb,GAAG,KAAK,IAAI,MAAM,UAAU,CAAC;AACxD;AAEA,SAAgB,iBAAiB,MAAc,mBAAuC;CACpF,IAAI,sBAAsB,KAAA,GACxB,OAAO;CAGT,OAAO,OAAO;AAChB"}

package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs

@@ -0,0 +1,51 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/resize-section-config.ts
+const RESIZE_SECTIONS = {
+	navbar: {
+		axis: "horizontal",
+		orientation: "vertical",
+		sizeVariable: "--app-shell-navbar-width",
+		offsetVariable: "--app-shell-navbar-offset",
+		gridWidthVariable: "--app-shell-navbar-grid-width",
+		handleDisplayVariable: "--app-shell-navbar-resize-handle-display",
+		sign: 1
+	},
+	aside: {
+		axis: "horizontal",
+		orientation: "vertical",
+		sizeVariable: "--app-shell-aside-width",
+		offsetVariable: "--app-shell-aside-offset",
+		gridWidthVariable: "--app-shell-aside-grid-width",
+		handleDisplayVariable: "--app-shell-aside-resize-handle-display",
+		sign: -1
+	},
+	header: {
+		axis: "vertical",
+		orientation: "horizontal",
+		sizeVariable: "--app-shell-header-height",
+		offsetVariable: "--app-shell-header-offset",
+		handleDisplayVariable: "--app-shell-header-resize-handle-display",
+		sign: 1
+	},
+	footer: {
+		axis: "vertical",
+		orientation: "horizontal",
+		sizeVariable: "--app-shell-footer-height",
+		offsetVariable: "--app-shell-footer-offset",
+		handleDisplayVariable: "--app-shell-footer-resize-handle-display",
+		safeAreaVariable: "--app-shell-footer-safe-area",
+		sign: -1
+	}
+};
+const RESIZE_SECTION_NAMES = Object.keys(RESIZE_SECTIONS);
+function getResizeDelta({ section, deltaX, deltaY, dir }) {
+	const config = RESIZE_SECTIONS[section];
+	if (config.axis === "vertical") return deltaY * config.sign;
+	return deltaX * config.sign * (dir === "rtl" ? -1 : 1);
+}
+//#endregion
+exports.RESIZE_SECTIONS = RESIZE_SECTIONS;
+exports.RESIZE_SECTION_NAMES = RESIZE_SECTION_NAMES;
+exports.getResizeDelta = getResizeDelta;
+
+//# sourceMappingURL=resize-section-config.cjs.map

package/cjs/components/AppShell/use-app-shell-resize/resize-section-config.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-section-config.cjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/resize-section-config.ts"],"sourcesContent":["import type { AppShellResizeSection } from '../AppShell.types';\n\nexport interface ResizeSectionConfig {\n  /** Axis the pointer moves along to resize the section */\n  axis: 'horizontal' | 'vertical';\n\n  /** `aria-orientation` of the separator element */\n  orientation: 'vertical' | 'horizontal';\n\n  /** CSS variable that controls the section size */\n  sizeVariable: string;\n\n  /** CSS variable that controls the space reserved for the section */\n  offsetVariable: string;\n\n  /** CSS variable that controls the grid track size in `mode=\"static\"` */\n  gridWidthVariable?: string;\n\n  /** CSS variable that controls whether the resize handle is displayed */\n  handleDisplayVariable: string;\n\n  /** CSS variable that exposes a safe-area inset baked into the section's measured size, if any */\n  safeAreaVariable?: string;\n\n  /** `1` when moving towards the end of the axis grows the section, `-1` otherwise */\n  sign: 1 | -1;\n}\n\nexport const RESIZE_SECTIONS: Record<AppShellResizeSection, ResizeSectionConfig> = {\n  navbar: {\n    axis: 'horizontal',\n    orientation: 'vertical',\n    sizeVariable: '--app-shell-navbar-width',\n    offsetVariable: '--app-shell-navbar-offset',\n    gridWidthVariable: '--app-shell-navbar-grid-width',\n    handleDisplayVariable: '--app-shell-navbar-resize-handle-display',\n    sign: 1,\n  },\n  aside: {\n    axis: 'horizontal',\n    orientation: 'vertical',\n    sizeVariable: '--app-shell-aside-width',\n    offsetVariable: '--app-shell-aside-offset',\n    gridWidthVariable: '--app-shell-aside-grid-width',\n    handleDisplayVariable: '--app-shell-aside-resize-handle-display',\n    sign: -1,\n  },\n  header: {\n    axis: 'vertical',\n    orientation: 'horizontal',\n    sizeVariable: '--app-shell-header-height',\n    offsetVariable: '--app-shell-header-offset',\n    handleDisplayVariable: '--app-shell-header-resize-handle-display',\n    sign: 1,\n  },\n  footer: {\n    axis: 'vertical',\n    orientation: 'horizontal',\n    sizeVariable: '--app-shell-footer-height',\n    offsetVariable: '--app-shell-footer-offset',\n    handleDisplayVariable: '--app-shell-footer-resize-handle-display',\n    safeAreaVariable: '--app-shell-footer-safe-area',\n    sign: -1,\n  },\n};\n\nexport const RESIZE_SECTION_NAMES = Object.keys(RESIZE_SECTIONS) as AppShellResizeSection[];\n\ninterface GetResizeDeltaInput {\n  section: AppShellResizeSection;\n  deltaX: number;\n  deltaY: number;\n  dir: 'ltr' | 'rtl';\n}\n\nexport function getResizeDelta({ section, deltaX, deltaY, dir }: GetResizeDeltaInput) {\n  const config = RESIZE_SECTIONS[section];\n\n  if (config.axis === 'vertical') {\n    return deltaY * config.sign;\n  }\n\n  return deltaX * config.sign * (dir === 'rtl' ? -1 : 1);\n}\n"],"mappings":";;AA4BA,MAAa,kBAAsE;CACjF,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,MAAM;CACR;CACA,OAAO;EACL,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,mBAAmB;EACnB,uBAAuB;EACvB,MAAM;CACR;CACA,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,uBAAuB;EACvB,MAAM;CACR;CACA,QAAQ;EACN,MAAM;EACN,aAAa;EACb,cAAc;EACd,gBAAgB;EAChB,uBAAuB;EACvB,kBAAkB;EAClB,MAAM;CACR;AACF;AAEA,MAAa,uBAAuB,OAAO,KAAK,eAAe;AAS/D,SAAgB,eAAe,EAAE,SAAS,QAAQ,QAAQ,OAA4B;CACpF,MAAM,SAAS,gBAAgB;CAE/B,IAAI,OAAO,SAAS,YAClB,OAAO,SAAS,OAAO;CAGzB,OAAO,SAAS,OAAO,QAAQ,QAAQ,QAAQ,KAAK;AACtD"}

package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/safe-area-inset.ts
+function getSafeAreaInset(element, variable) {
+	if (!variable) return 0;
+	const value = window.getComputedStyle(element).getPropertyValue(variable);
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+//#endregion
+exports.getSafeAreaInset = getSafeAreaInset;
+
+//# sourceMappingURL=safe-area-inset.cjs.map

package/cjs/components/AppShell/use-app-shell-resize/safe-area-inset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"safe-area-inset.cjs","names":[],"sources":["../../../../src/components/AppShell/use-app-shell-resize/safe-area-inset.ts"],"sourcesContent":["export function getSafeAreaInset(element: Element, variable: string | undefined) {\n  if (!variable) {\n    return 0;\n  }\n\n  const value = window.getComputedStyle(element).getPropertyValue(variable);\n  const parsed = Number.parseFloat(value);\n  return Number.isFinite(parsed) ? parsed : 0;\n}\n"],"mappings":";;AAAA,SAAgB,iBAAiB,SAAkB,UAA8B;CAC/E,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,QAAQ,OAAO,iBAAiB,OAAO,CAAC,CAAC,iBAAiB,QAAQ;CACxE,MAAM,SAAS,OAAO,WAAW,KAAK;CACtC,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;AAC5C"}

package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs

@@ -0,0 +1,127 @@
+"use client";
+const require_resize_section_config = require("./resize-section-config.cjs");
+let react = require("react");
+let _mantine_hooks = require("@mantine/hooks");
+//#region packages/@mantine/core/src/components/AppShell/use-app-shell-resize/use-app-shell-resize.ts
+function useAppShellResize(input = {}) {
+	const { navbar, aside, header, footer, initialSizes, onResize, onResizeEnd, onCollapseChange } = input;
+	const [sizes, setSizes] = (0, react.useState)({});
+	const [touched, setTouched] = (0, react.useState)({});
+	const [activeSection, setActiveSection] = (0, react.useState)(null);
+	const collapsedRef = (0, react.useRef)({});
+	const handleResize = (0, _mantine_hooks.useCallbackRef)(onResize);
+	const handleResizeEnd = (0, _mantine_hooks.useCallbackRef)(onResizeEnd);
+	const handleCollapseChange = (0, _mantine_hooks.useCallbackRef)(onCollapseChange);
+	const options = (0, react.useMemo)(() => ({
+		navbar,
+		aside,
+		header,
+		footer
+	}), [
+		navbar,
+		aside,
+		header,
+		footer
+	]);
+	const resolvedSizes = (0, react.useMemo)(() => {
+		const result = {};
+		require_resize_section_config.RESIZE_SECTION_NAMES.forEach((section) => {
+			if (sizes[section] !== void 0) {
+				result[section] = sizes[section];
+				return;
+			}
+			if (!touched[section] && initialSizes?.[section] !== void 0) result[section] = initialSizes[section];
+		});
+		return result;
+	}, [
+		sizes,
+		touched,
+		initialSizes
+	]);
+	const resolvedSizesRef = (0, react.useRef)(resolvedSizes);
+	resolvedSizesRef.current = resolvedSizes;
+	const commitSize = (0, react.useCallback)((section, size) => {
+		setTouched((current) => ({
+			...current,
+			[section]: true
+		}));
+		setSizes((current) => ({
+			...current,
+			[section]: size
+		}));
+	}, []);
+	const clearSize = (0, react.useCallback)((section) => {
+		setTouched((current) => ({
+			...current,
+			[section]: true
+		}));
+		setSizes((current) => {
+			const next = { ...current };
+			delete next[section];
+			return next;
+		});
+	}, []);
+	const startResize = (0, react.useCallback)((section) => {
+		setActiveSection(section);
+	}, []);
+	const previewResize = (0, react.useCallback)((section, size) => {
+		handleResize({
+			...resolvedSizesRef.current,
+			[section]: size
+		});
+	}, [handleResize]);
+	const endResize = (0, react.useCallback)((section, size) => {
+		setActiveSection(null);
+		delete collapsedRef.current[section];
+		if (size === null) return;
+		commitSize(section, size);
+		handleResizeEnd({
+			...resolvedSizesRef.current,
+			[section]: size
+		});
+	}, [commitSize, handleResizeEnd]);
+	const initCollapse = (0, react.useCallback)((section, collapsed) => {
+		collapsedRef.current[section] = collapsed;
+	}, []);
+	const reportCollapse = (0, react.useCallback)((section, collapsed) => {
+		if (collapsedRef.current[section] === collapsed) return;
+		collapsedRef.current[section] = collapsed;
+		handleCollapseChange(section, collapsed);
+	}, [handleCollapseChange]);
+	const resetAll = (0, react.useCallback)(() => {
+		setTouched(() => {
+			const next = {};
+			require_resize_section_config.RESIZE_SECTION_NAMES.forEach((section) => {
+				next[section] = true;
+			});
+			return next;
+		});
+		setSizes({});
+	}, []);
+	const getSectionController = (section) => ({
+		enabled: options[section] !== void 0,
+		size: resolvedSizes[section],
+		active: activeSection === section,
+		setSize: (size) => commitSize(section, size),
+		reset: () => clearSize(section)
+	});
+	return {
+		navbar: getSectionController("navbar"),
+		aside: getSectionController("aside"),
+		header: getSectionController("header"),
+		footer: getSectionController("footer"),
+		sizes: resolvedSizes,
+		resetAll,
+		options,
+		activeSection,
+		startResize,
+		previewResize,
+		endResize,
+		initCollapse,
+		reportCollapse
+	};
+}
+//#endregion
+exports.useAppShellResize = useAppShellResize;
+
+//# sourceMappingURL=use-app-shell-resize.cjs.map

package/cjs/components/AppShell/use-app-shell-resize/use-app-shell-resize.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-app-shell-resize.cjs","names":["useState","useRef","useCallbackRef","useMemo","useCallback"],"sources":["../../../../src/components/AppShell/use-app-shell-resize/use-app-shell-resize.ts"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from 'react';\nimport { useCallbackRef } from '@mantine/hooks';\nimport type {\n  AppShellResizeController,\n  AppShellResizeSection,\n  AppShellResizeSectionController,\n  AppShellResizeSizes,\n  UseAppShellResizeInput,\n} from '../AppShell.types';\nimport { RESIZE_SECTION_NAMES } from './resize-section-config';\n\ntype SectionFlags = Partial<Record<AppShellResizeSection, boolean>>;\n\nexport function useAppShellResize(input: UseAppShellResizeInput = {}): AppShellResizeController {\n  const { navbar, aside, header, footer, initialSizes, onResize, onResizeEnd, onCollapseChange } =\n    input;\n\n  const [sizes, setSizes] = useState<AppShellResizeSizes>({});\n  const [touched, setTouched] = useState<SectionFlags>({});\n  const [activeSection, setActiveSection] = useState<AppShellResizeSection | null>(null);\n  const collapsedRef = useRef<SectionFlags>({});\n  const handleResize = useCallbackRef(onResize);\n  const handleResizeEnd = useCallbackRef(onResizeEnd);\n  const handleCollapseChange = useCallbackRef(onCollapseChange);\n\n  const options = useMemo(\n    () => ({ navbar, aside, header, footer }),\n    [navbar, aside, header, footer]\n  );\n\n  const resolvedSizes = useMemo(() => {\n    const result: AppShellResizeSizes = {};\n\n    RESIZE_SECTION_NAMES.forEach((section) => {\n      if (sizes[section] !== undefined) {\n        result[section] = sizes[section];\n        return;\n      }\n\n      if (!touched[section] && initialSizes?.[section] !== undefined) {\n        result[section] = initialSizes[section];\n      }\n    });\n\n    return result;\n  }, [sizes, touched, initialSizes]);\n\n  const resolvedSizesRef = useRef(resolvedSizes);\n  resolvedSizesRef.current = resolvedSizes;\n\n  const commitSize = useCallback((section: AppShellResizeSection, size: number) => {\n    setTouched((current) => ({ ...current, [section]: true }));\n    setSizes((current) => ({ ...current, [section]: size }));\n  }, []);\n\n  const clearSize = useCallback((section: AppShellResizeSection) => {\n    setTouched((current) => ({ ...current, [section]: true }));\n    setSizes((current) => {\n      const next = { ...current };\n      delete next[section];\n      return next;\n    });\n  }, []);\n\n  const startResize = useCallback((section: AppShellResizeSection) => {\n    setActiveSection(section);\n  }, []);\n\n  const previewResize = useCallback(\n    (section: AppShellResizeSection, size: number) => {\n      handleResize({ ...resolvedSizesRef.current, [section]: size });\n    },\n    [handleResize]\n  );\n\n  const endResize = useCallback(\n    (section: AppShellResizeSection, size: number | null) => {\n      setActiveSection(null);\n      delete collapsedRef.current[section];\n\n      if (size === null) {\n        return;\n      }\n\n      commitSize(section, size);\n      handleResizeEnd({ ...resolvedSizesRef.current, [section]: size });\n    },\n    [commitSize, handleResizeEnd]\n  );\n\n  const initCollapse = useCallback((section: AppShellResizeSection, collapsed: boolean) => {\n    collapsedRef.current[section] = collapsed;\n  }, []);\n\n  const reportCollapse = useCallback(\n    (section: AppShellResizeSection, collapsed: boolean) => {\n      if (collapsedRef.current[section] === collapsed) {\n        return;\n      }\n\n      collapsedRef.current[section] = collapsed;\n      handleCollapseChange(section, collapsed);\n    },\n    [handleCollapseChange]\n  );\n\n  const resetAll = useCallback(() => {\n    setTouched(() => {\n      const next: SectionFlags = {};\n      RESIZE_SECTION_NAMES.forEach((section) => {\n        next[section] = true;\n      });\n      return next;\n    });\n    setSizes({});\n  }, []);\n\n  const getSectionController = (\n    section: AppShellResizeSection\n  ): AppShellResizeSectionController => ({\n    enabled: options[section] !== undefined,\n    size: resolvedSizes[section],\n    active: activeSection === section,\n    setSize: (size: number) => commitSize(section, size),\n    reset: () => clearSize(section),\n  });\n\n  return {\n    navbar: getSectionController('navbar'),\n    aside: getSectionController('aside'),\n    header: getSectionController('header'),\n    footer: getSectionController('footer'),\n    sizes: resolvedSizes,\n    resetAll,\n    options,\n    activeSection,\n    startResize,\n    previewResize,\n    endResize,\n    initCollapse,\n    reportCollapse,\n  };\n}\n"],"mappings":"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"}

package/cjs/components/AppShell/use-resizing/use-resizing.cjs

@@ -2,10 +2,28 @@
 let react = require("react");
 let _mantine_hooks = require("@mantine/hooks");
 //#region packages/@mantine/core/src/components/AppShell/use-resizing/use-resizing.tsx
-function useResizing({ transitionDuration, disabled }) {
+function useResizing({ transitionDuration, disabled, resizeKey }) {
 	const [resizing, setResizing] = (0, react.useState)(true);
+	const [settling, setSettling] = (0, react.useState)({
+		key: resizeKey,
+		active: false
+	});
 	const resizingTimeout = (0, react.useRef)(-1);
 	const disabledTimeout = (0, react.useRef)(-1);
+	if (settling.key !== resizeKey) setSettling({
+		key: resizeKey,
+		active: true
+	});
+	(0, react.useEffect)(() => {
+		if (!settling.active) return;
+		const settlingTimeout = window.setTimeout(() => (0, react.startTransition)(() => {
+			setSettling((current) => ({
+				...current,
+				active: false
+			}));
+		}), transitionDuration || 0);
+		return () => window.clearTimeout(settlingTimeout);
+	}, [settling, transitionDuration]);
 	(0, _mantine_hooks.useWindowEvent)("resize", () => {
 		setResizing(true);
 		clearTimeout(resizingTimeout.current);
@@ -20,7 +38,7 @@ function useResizing({ transitionDuration, disabled }) {
 			setResizing(false);
 		}), transitionDuration || 0);
 	}, [disabled, transitionDuration]);
-	return resizing;
+	return resizing || settling.active;
 }
 //#endregion
 exports.useResizing = useResizing;

package/cjs/components/AppShell/use-resizing/use-resizing.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-resizing.cjs","names":["useState","useRef","startTransition"],"sources":["../../../../src/components/AppShell/use-resizing/use-resizing.tsx"],"sourcesContent":["import { startTransition, useRef, useState } from 'react';\nimport { useIsomorphicEffect, useWindowEvent } from '@mantine/hooks';\n\ninterface UseResizingInput {\n  transitionDuration: number | undefined;\n  disabled: boolean | undefined;\n}\n\nexport function useResizing({ transitionDuration, disabled }: UseResizingInput) {\n  const [resizing, setResizing] = useState(true);\n  const resizingTimeout = useRef<number>(-1);\n  const disabledTimeout = useRef<number>(-1);\n\n  useWindowEvent('resize', () => {\n    setResizing(true);\n    clearTimeout(resizingTimeout.current);\n    resizingTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      200\n    );\n  });\n\n  useIsomorphicEffect(() => {\n    setResizing(true);\n    clearTimeout(disabledTimeout.current);\n    disabledTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      transitionDuration || 0\n    );\n  }, [disabled, transitionDuration]);\n\n  return resizing;\n}\n"],"mappings":";;;;AAQA,SAAgB,YAAY,EAAE,oBAAoB,YAA8B;CAC9E,MAAM,CAAC,UAAU,gBAAA,GAAeA,MAAAA,SAAAA,CAAS,IAAI;CAC7C,MAAM,mBAAA,GAAkBC,MAAAA,OAAAA,CAAe,EAAE;CACzC,MAAM,mBAAA,GAAkBA,MAAAA,OAAAA,CAAe,EAAE;CAEzC,CAAA,GAAA,eAAA,eAAA,CAAe,gBAAgB;EAC7B,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,kBAAA,GAE7BC,MAAAA,gBAAAA,OAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,GACF;CACF,CAAC;CAED,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,kBAAA,GAE7BA,MAAAA,gBAAAA,OAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,sBAAsB,CACxB;CACF,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,OAAO;AACT"}
+{"version":3,"file":"use-resizing.cjs","names":["useState","useRef","startTransition"],"sources":["../../../../src/components/AppShell/use-resizing/use-resizing.tsx"],"sourcesContent":["import { startTransition, useEffect, useRef, useState } from 'react';\nimport { useIsomorphicEffect, useWindowEvent } from '@mantine/hooks';\n\ninterface UseResizingInput {\n  transitionDuration: number | undefined;\n  disabled: boolean | undefined;\n  resizeKey?: string;\n}\n\nexport function useResizing({ transitionDuration, disabled, resizeKey }: UseResizingInput) {\n  const [resizing, setResizing] = useState(true);\n  const [settling, setSettling] = useState({ key: resizeKey, active: false });\n  const resizingTimeout = useRef<number>(-1);\n  const disabledTimeout = useRef<number>(-1);\n\n  if (settling.key !== resizeKey) {\n    setSettling({ key: resizeKey, active: true });\n  }\n\n  useEffect(() => {\n    if (!settling.active) {\n      return undefined;\n    }\n\n    const settlingTimeout = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setSettling((current) => ({ ...current, active: false }));\n        }),\n      transitionDuration || 0\n    );\n\n    return () => window.clearTimeout(settlingTimeout);\n  }, [settling, transitionDuration]);\n\n  useWindowEvent('resize', () => {\n    setResizing(true);\n    clearTimeout(resizingTimeout.current);\n    resizingTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      200\n    );\n  });\n\n  useIsomorphicEffect(() => {\n    setResizing(true);\n    clearTimeout(disabledTimeout.current);\n    disabledTimeout.current = window.setTimeout(\n      () =>\n        startTransition(() => {\n          setResizing(false);\n        }),\n      transitionDuration || 0\n    );\n  }, [disabled, transitionDuration]);\n\n  return resizing || settling.active;\n}\n"],"mappings":";;;;AASA,SAAgB,YAAY,EAAE,oBAAoB,UAAU,aAA+B;CACzF,MAAM,CAAC,UAAU,gBAAA,GAAeA,MAAAA,SAAAA,CAAS,IAAI;CAC7C,MAAM,CAAC,UAAU,gBAAA,GAAeA,MAAAA,SAAAA,CAAS;EAAE,KAAK;EAAW,QAAQ;CAAM,CAAC;CAC1E,MAAM,mBAAA,GAAkBC,MAAAA,OAAAA,CAAe,EAAE;CACzC,MAAM,mBAAA,GAAkBA,MAAAA,OAAAA,CAAe,EAAE;CAEzC,IAAI,SAAS,QAAQ,WACnB,YAAY;EAAE,KAAK;EAAW,QAAQ;CAAK,CAAC;CAG9C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,CAAC,SAAS,QACZ;EAGF,MAAM,kBAAkB,OAAO,kBAAA,GAE3BC,MAAAA,gBAAAA,OAAsB;GACpB,aAAa,aAAa;IAAE,GAAG;IAAS,QAAQ;GAAM,EAAE;EAC1D,CAAC,GACH,sBAAsB,CACxB;EAEA,aAAa,OAAO,aAAa,eAAe;CAClD,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,CAAA,GAAA,eAAA,eAAA,CAAe,gBAAgB;EAC7B,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,kBAAA,GAE7BA,MAAAA,gBAAAA,OAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,GACF;CACF,CAAC;CAED,CAAA,GAAA,eAAA,oBAAA,OAA0B;EACxB,YAAY,IAAI;EAChB,aAAa,gBAAgB,OAAO;EACpC,gBAAgB,UAAU,OAAO,kBAAA,GAE7BA,MAAAA,gBAAAA,OAAsB;GACpB,YAAY,KAAK;EACnB,CAAC,GACH,sBAAsB,CACxB;CACF,GAAG,CAAC,UAAU,kBAAkB,CAAC;CAEjC,OAAO,YAAY,SAAS;AAC9B"}

package/cjs/components/Checkbox/Checkbox.cjs

@@ -33,11 +33,19 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : require_get_theme_color.getThemeColor(color, theme);
 	return { root: {
 		"--checkbox-size": require_get_size.getSize(size, "checkbox-size"),
 		"--checkbox-radius": radius === void 0 ? void 0 : require_get_size.getRadius(radius),
-		"--checkbox-color": variant === "outline" ? outlineColor : require_get_theme_color.getThemeColor(color, theme),
-		"--checkbox-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
+		"--checkbox-color": resolvedColor,
+		"--checkbox-bg": lightColors?.background,
+		"--checkbox-icon-color": iconColor ? require_get_theme_color.getThemeColor(iconColor, theme) : lightColors ? lightColors.color : require_get_auto_contrast_value.getAutoContrastValue(autoContrast, theme) ? require_get_contrast_color.getContrastColor({
 			color,
 			theme,
 			autoContrast