@mantine/core 6.0.11 → 7.0.0-alpha.11

package/esm/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.js

@@ -0,0 +1,57 @@
+import { __rest } from 'tslib';
+import React, { forwardRef, useRef, useEffect } from 'react';
+import { useMergedRef, useDebounceCallback } from '@mantine/hooks';
+import { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context.js';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { composeEventHandlers } from '../utils/compose-event-handlers.js';
+import { addUnlinkedScrollListener } from '../utils/add-unlinked-scroll-listener.js';
+
+const Thumb = forwardRef((props, forwardedRef) => {
+    const { style } = props, others = __rest(props, ["style"]);
+    const scrollAreaContext = useScrollAreaContext();
+    const scrollbarContext = useScrollbarContext();
+    const { onThumbPositionChange } = scrollbarContext;
+    const composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node));
+    const removeUnlinkedScrollListenerRef = useRef();
+    const debounceScrollEnd = useDebounceCallback(() => {
+        if (removeUnlinkedScrollListenerRef.current) {
+            removeUnlinkedScrollListenerRef.current();
+            removeUnlinkedScrollListenerRef.current = undefined;
+        }
+    }, 100);
+    useEffect(() => {
+        const { viewport } = scrollAreaContext;
+        if (viewport) {
+            const handleScroll = () => {
+                debounceScrollEnd();
+                if (!removeUnlinkedScrollListenerRef.current) {
+                    const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);
+                    removeUnlinkedScrollListenerRef.current = listener;
+                    onThumbPositionChange();
+                }
+            };
+            onThumbPositionChange();
+            viewport.addEventListener('scroll', handleScroll);
+            return () => viewport.removeEventListener('scroll', handleScroll);
+        }
+        return undefined;
+    }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);
+    return (React.createElement("div", Object.assign({ "data-state": scrollbarContext.hasThumb ? 'visible' : 'hidden' }, others, { ref: composedRef, style: Object.assign({ width: 'var(--sa-thumb-width)', height: 'var(--sa-thumb-height)' }, style), onPointerDownCapture: composeEventHandlers(props.onPointerDownCapture, (event) => {
+            const thumb = event.target;
+            const thumbRect = thumb.getBoundingClientRect();
+            const x = event.clientX - thumbRect.left;
+            const y = event.clientY - thumbRect.top;
+            scrollbarContext.onThumbPointerDown({ x, y });
+        }), onPointerUp: composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp) })));
+});
+const ScrollAreaThumb = React.forwardRef((props, forwardedRef) => {
+    const { forceMount } = props, thumbProps = __rest(props, ["forceMount"]);
+    const scrollbarContext = useScrollbarContext();
+    if (forceMount || scrollbarContext.hasThumb) {
+        return React.createElement(Thumb, Object.assign({ ref: forwardedRef }, thumbProps));
+    }
+    return null;
+});
+
+export { ScrollAreaThumb, Thumb };
+//# sourceMappingURL=ScrollAreaThumb.js.map

package/esm/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaThumb.js","sources":["../../../../src/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect } from 'react';\nimport { useDebounceCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollbarContext } from '../ScrollAreaScrollbar/Scrollbar.context';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { addUnlinkedScrollListener, composeEventHandlers } from '../utils';\n\ninterface ThumbProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nexport const Thumb = forwardRef<HTMLDivElement, ThumbProps>((props, forwardedRef) => {\n  const { style, ...others } = props;\n  const scrollAreaContext = useScrollAreaContext();\n  const scrollbarContext = useScrollbarContext();\n  const { onThumbPositionChange } = scrollbarContext;\n  const composedRef = useMergedRef(forwardedRef, (node) => scrollbarContext.onThumbChange(node));\n  const removeUnlinkedScrollListenerRef = useRef<() => void>();\n  const debounceScrollEnd = useDebounceCallback(() => {\n    if (removeUnlinkedScrollListenerRef.current) {\n      removeUnlinkedScrollListenerRef.current();\n      removeUnlinkedScrollListenerRef.current = undefined;\n    }\n  }, 100);\n\n  useEffect(() => {\n    const { viewport } = scrollAreaContext;\n    if (viewport) {\n      const handleScroll = () => {\n        debounceScrollEnd();\n        if (!removeUnlinkedScrollListenerRef.current) {\n          const listener = addUnlinkedScrollListener(viewport, onThumbPositionChange);\n          removeUnlinkedScrollListenerRef.current = listener;\n          onThumbPositionChange();\n        }\n      };\n      onThumbPositionChange();\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n\n    return undefined;\n  }, [scrollAreaContext.viewport, debounceScrollEnd, onThumbPositionChange]);\n\n  return (\n    <div\n      data-state={scrollbarContext.hasThumb ? 'visible' : 'hidden'}\n      {...others}\n      ref={composedRef}\n      style={{\n        width: 'var(--sa-thumb-width)',\n        height: 'var(--sa-thumb-height)',\n        ...style,\n      }}\n      onPointerDownCapture={composeEventHandlers(props.onPointerDownCapture, (event) => {\n        const thumb = event.target as HTMLElement;\n        const thumbRect = thumb.getBoundingClientRect();\n        const x = event.clientX - thumbRect.left;\n        const y = event.clientY - thumbRect.top;\n        scrollbarContext.onThumbPointerDown({ x, y });\n      })}\n      onPointerUp={composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)}\n    />\n  );\n});\n\ninterface ScrollAreaThumbProps extends ThumbProps {\n  forceMount?: true;\n}\n\nexport const ScrollAreaThumb = React.forwardRef<HTMLDivElement, ScrollAreaThumbProps>(\n  (props, forwardedRef) => {\n    const { forceMount, ...thumbProps } = props;\n    const scrollbarContext = useScrollbarContext();\n\n    if (forceMount || scrollbarContext.hasThumb) {\n      return <Thumb ref={forwardedRef} {...thumbProps} />;\n    }\n\n    return null;\n  }\n);\n"],"names":[],"mappings":"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"}

package/esm/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.js

@@ -0,0 +1,17 @@
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { useScrollAreaContext } from '../ScrollArea.context.js';
+import { Box } from '../../../core/Box/Box.js';
+
+const ScrollAreaViewport = forwardRef((_a, ref) => {
+    var { children, style } = _a, others = __rest(_a, ["children", "style"]);
+    const ctx = useScrollAreaContext();
+    const rootRef = useMergedRef(ref, ctx.onViewportChange);
+    return (React.createElement(Box, Object.assign({}, others, { ref: rootRef, style: Object.assign({ overflowX: ctx.scrollbarXEnabled ? 'scroll' : 'hidden', overflowY: ctx.scrollbarYEnabled ? 'scroll' : 'hidden' }, style) }),
+        React.createElement("div", { style: { minWidth: '100%', display: 'table' }, ref: ctx.onContentChange }, children)));
+});
+ScrollAreaViewport.displayName = '@mantine/core/ScrollAreaViewport';
+
+export { ScrollAreaViewport };
+//# sourceMappingURL=ScrollAreaViewport.js.map

package/esm/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollAreaViewport.js","sources":["../../../../src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { Box, BoxProps, ElementProps } from '../../../core';\nimport { useScrollAreaContext } from '../ScrollArea.context';\n\nexport interface ScrollAreaViewportProps extends BoxProps, ElementProps<'div'> {}\n\nexport const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportProps>(\n  ({ children, style, ...others }, ref) => {\n    const ctx = useScrollAreaContext();\n    const rootRef = useMergedRef(ref, ctx.onViewportChange);\n\n    return (\n      <Box\n        {...others}\n        ref={rootRef}\n        style={{\n          overflowX: ctx.scrollbarXEnabled ? 'scroll' : 'hidden',\n          overflowY: ctx.scrollbarYEnabled ? 'scroll' : 'hidden',\n          ...style,\n        }}\n      >\n        <div style={{ minWidth: '100%', display: 'table' }} ref={ctx.onContentChange}>\n          {children}\n        </div>\n      </Box>\n    );\n  }\n);\n\nScrollAreaViewport.displayName = '@mantine/core/ScrollAreaViewport';\n"],"names":[],"mappings":";;;;;;MAOa,kBAAkB,GAAG,UAAU,CAC1C,CAAC,EAA8B,EAAE,GAAG;QAAnC,EAAE,QAAQ,EAAE,KAAK,OAAa,EAAR,MAAM,cAA5B,qBAA8B,CAAF;IAC3B,MAAM,GAAG,GAAG,oBAAoB,EAAE,CAAC;IACnC,MAAM,OAAO,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAExD,QACE,oBAAC,GAAG,oBACE,MAAM,IACV,GAAG,EAAE,OAAO,EACZ,KAAK,kBACH,SAAS,EAAE,GAAG,CAAC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,EACtD,SAAS,EAAE,GAAG,CAAC,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,IACnD,KAAK;QAGV,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,eAAe,IACzE,QAAQ,CACL,CACF,EACN;AACJ,CAAC,EACD;AAEF,kBAAkB,CAAC,WAAW,GAAG,kCAAkC;;;;"}

package/esm/components/ScrollArea/use-resize-observer.js

@@ -0,0 +1,23 @@
+import { useCallbackRef, useIsomorphicEffect } from '@mantine/hooks';
+
+function useResizeObserver(element, onResize) {
+    const handleResize = useCallbackRef(onResize);
+    useIsomorphicEffect(() => {
+        let rAF = 0;
+        if (element) {
+            const resizeObserver = new ResizeObserver(() => {
+                cancelAnimationFrame(rAF);
+                rAF = window.requestAnimationFrame(handleResize);
+            });
+            resizeObserver.observe(element);
+            return () => {
+                window.cancelAnimationFrame(rAF);
+                resizeObserver.unobserve(element);
+            };
+        }
+        return undefined;
+    }, [element, handleResize]);
+}
+
+export { useResizeObserver };
+//# sourceMappingURL=use-resize-observer.js.map

package/esm/components/ScrollArea/use-resize-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.js","sources":["../../../src/components/ScrollArea/use-resize-observer.ts"],"sourcesContent":["import { useIsomorphicEffect, useCallbackRef } from '@mantine/hooks';\n\nexport function useResizeObserver(element: HTMLElement | null, onResize: () => void) {\n  const handleResize = useCallbackRef(onResize);\n\n  useIsomorphicEffect(() => {\n    let rAF = 0;\n    if (element) {\n      const resizeObserver = new ResizeObserver(() => {\n        cancelAnimationFrame(rAF);\n        rAF = window.requestAnimationFrame(handleResize);\n      });\n\n      resizeObserver.observe(element);\n\n      return () => {\n        window.cancelAnimationFrame(rAF);\n        resizeObserver.unobserve(element);\n      };\n    }\n\n    return undefined;\n  }, [element, handleResize]);\n}\n"],"names":[],"mappings":";;SAEgB,iBAAiB,CAAC,OAA2B,EAAE,QAAoB;IACjF,MAAM,YAAY,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE9C,mBAAmB,CAAC;QAClB,IAAI,GAAG,GAAG,CAAC,CAAC;QACZ,IAAI,OAAO,EAAE;YACX,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC;gBACxC,oBAAoB,CAAC,GAAG,CAAC,CAAC;gBAC1B,GAAG,GAAG,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,CAAC;aAClD,CAAC,CAAC;YAEH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAEhC,OAAO;gBACL,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;gBACjC,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;aACnC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;KAClB,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC;AAC9B;;;;"}

package/esm/components/ScrollArea/utils/add-unlinked-scroll-listener.js

@@ -0,0 +1,18 @@
+/* eslint-disable wrap-iife */
+function addUnlinkedScrollListener(node, handler = () => { }) {
+    let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
+    let rAF = 0;
+    (function loop() {
+        const position = { left: node.scrollLeft, top: node.scrollTop };
+        const isHorizontalScroll = prevPosition.left !== position.left;
+        const isVerticalScroll = prevPosition.top !== position.top;
+        if (isHorizontalScroll || isVerticalScroll)
+            handler();
+        prevPosition = position;
+        rAF = window.requestAnimationFrame(loop);
+    })();
+    return () => window.cancelAnimationFrame(rAF);
+}
+
+export { addUnlinkedScrollListener };
+//# sourceMappingURL=add-unlinked-scroll-listener.js.map

package/esm/components/ScrollArea/utils/add-unlinked-scroll-listener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-unlinked-scroll-listener.js","sources":["../../../../src/components/ScrollArea/utils/add-unlinked-scroll-listener.tsx"],"sourcesContent":["/* eslint-disable wrap-iife */\nexport function addUnlinkedScrollListener(node: HTMLElement, handler = () => {}) {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop };\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop };\n    const isHorizontalScroll = prevPosition.left !== position.left;\n    const isVerticalScroll = prevPosition.top !== position.top;\n    if (isHorizontalScroll || isVerticalScroll) handler();\n    prevPosition = position;\n    rAF = window.requestAnimationFrame(loop);\n  })();\n  return () => window.cancelAnimationFrame(rAF);\n}\n"],"names":[],"mappings":"AAAA;SACgB,yBAAyB,CAAC,IAAiB,EAAE,OAAO,GAAG,SAAQ;IAC7E,IAAI,YAAY,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAClE,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,CAAC,SAAS,IAAI;QACZ,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;QAChE,MAAM,kBAAkB,GAAG,YAAY,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC;QAC/D,MAAM,gBAAgB,GAAG,YAAY,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;QAC3D,IAAI,kBAAkB,IAAI,gBAAgB;YAAE,OAAO,EAAE,CAAC;QACtD,YAAY,GAAG,QAAQ,CAAC;QACxB,GAAG,GAAG,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC1C,GAAG,CAAC;IACL,OAAO,MAAM,MAAM,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC;AAChD;;;;"}

package/esm/components/ScrollArea/utils/compose-event-handlers.js

@@ -0,0 +1,11 @@
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+    return (event) => {
+        originalEventHandler === null || originalEventHandler === void 0 ? void 0 : originalEventHandler(event);
+        if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+            ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
+        }
+    };
+}
+
+export { composeEventHandlers };
+//# sourceMappingURL=compose-event-handlers.js.map

package/esm/components/ScrollArea/utils/compose-event-handlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compose-event-handlers.js","sources":["../../../../src/components/ScrollArea/utils/compose-event-handlers.ts"],"sourcesContent":["export function composeEventHandlers<E>(\n  originalEventHandler?: (event: E) => void,\n  ourEventHandler?: (event: E) => void,\n  { checkForDefaultPrevented = true } = {}\n) {\n  return (event: E) => {\n    originalEventHandler?.(event);\n\n    if (checkForDefaultPrevented === false || !(event as unknown as Event).defaultPrevented) {\n      ourEventHandler?.(event);\n    }\n  };\n}\n"],"names":[],"mappings":"SAAgB,oBAAoB,CAClC,oBAAyC,EACzC,eAAoC,EACpC,EAAE,wBAAwB,GAAG,IAAI,EAAE,GAAG,EAAE;IAExC,OAAO,CAAC,KAAQ;QACd,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAG,KAAK,CAAC,CAAC;QAE9B,IAAI,wBAAwB,KAAK,KAAK,IAAI,CAAE,KAA0B,CAAC,gBAAgB,EAAE;YACvF,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,KAAK,CAAC,CAAC;SAC1B;KACF,CAAC;AACJ;;;;"}

package/esm/components/ScrollArea/utils/get-scroll-position-from-pointer.js

@@ -0,0 +1,18 @@
+import { getThumbSize } from './get-thumb-size.js';
+import { linearScale } from './linear-scale.js';
+
+function getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = 'ltr') {
+    const thumbSizePx = getThumbSize(sizes);
+    const thumbCenter = thumbSizePx / 2;
+    const offset = pointerOffset || thumbCenter;
+    const thumbOffsetFromEnd = thumbSizePx - offset;
+    const minPointerPos = sizes.scrollbar.paddingStart + offset;
+    const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const scrollRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+    const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange);
+    return interpolate(pointerPos);
+}
+
+export { getScrollPositionFromPointer };
+//# sourceMappingURL=get-scroll-position-from-pointer.js.map

package/esm/components/ScrollArea/utils/get-scroll-position-from-pointer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-scroll-position-from-pointer.js","sources":["../../../../src/components/ScrollArea/utils/get-scroll-position-from-pointer.ts"],"sourcesContent":["import type { Sizes } from '../ScrollArea.types';\nimport { getThumbSize } from './get-thumb-size';\nimport { linearScale } from './linear-scale';\n\nexport function getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: 'ltr' | 'rtl' = 'ltr'\n) {\n  const thumbSizePx = getThumbSize(sizes);\n  const thumbCenter = thumbSizePx / 2;\n  const offset = pointerOffset || thumbCenter;\n  const thumbOffsetFromEnd = thumbSizePx - offset;\n  const minPointerPos = sizes.scrollbar.paddingStart + offset;\n  const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const scrollRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];\n  const interpolate = linearScale([minPointerPos, maxPointerPos], scrollRange as [number, number]);\n  return interpolate(pointerPos);\n}\n"],"names":[],"mappings":";;;SAIgB,4BAA4B,CAC1C,UAAkB,EAClB,aAAqB,EACrB,KAAY,EACZ,MAAqB,KAAK;IAE1B,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;IACpC,MAAM,MAAM,GAAG,aAAa,IAAI,WAAW,CAAC;IAC5C,MAAM,kBAAkB,GAAG,WAAW,GAAG,MAAM,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,MAAM,CAAC;IAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,GAAG,kBAAkB,CAAC;IAC7F,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IACpD,MAAM,WAAW,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC/E,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,EAAE,WAA+B,CAAC,CAAC;IACjG,OAAO,WAAW,CAAC,UAAU,CAAC,CAAC;AACjC;;;;"}

package/esm/components/ScrollArea/utils/get-thumb-offset-from-scroll.js

@@ -0,0 +1,20 @@
+import { getThumbSize } from './get-thumb-size.js';
+import { linearScale } from './linear-scale.js';
+
+function clamp(value, [min, max]) {
+    return Math.min(max, Math.max(min, value));
+}
+function getThumbOffsetFromScroll(scrollPos, sizes, dir = 'ltr') {
+    const thumbSizePx = getThumbSize(sizes);
+    const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+    const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const maxThumbPos = scrollbar - thumbSizePx;
+    const scrollClampRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
+    const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange);
+    const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
+    return interpolate(scrollWithoutMomentum);
+}
+
+export { getThumbOffsetFromScroll };
+//# sourceMappingURL=get-thumb-offset-from-scroll.js.map

package/esm/components/ScrollArea/utils/get-thumb-offset-from-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-thumb-offset-from-scroll.js","sources":["../../../../src/components/ScrollArea/utils/get-thumb-offset-from-scroll.ts"],"sourcesContent":["import type { Sizes } from '../ScrollArea.types';\nimport { getThumbSize } from './get-thumb-size';\nimport { linearScale } from './linear-scale';\n\nfunction clamp(value: number, [min, max]: [number, number]): number {\n  return Math.min(max, Math.max(min, value));\n}\n\nexport function getThumbOffsetFromScroll(\n  scrollPos: number,\n  sizes: Sizes,\n  dir: 'rtl' | 'ltr' = 'ltr'\n) {\n  const thumbSizePx = getThumbSize(sizes);\n  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const maxThumbPos = scrollbar - thumbSizePx;\n  const scrollClampRange = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0];\n  const scrollWithoutMomentum = clamp(scrollPos, scrollClampRange as [number, number]);\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);\n  return interpolate(scrollWithoutMomentum);\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,KAAK,CAAC,KAAa,EAAE,CAAC,GAAG,EAAE,GAAG,CAAmB;IACxD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;SAEe,wBAAwB,CACtC,SAAiB,EACjB,KAAY,EACZ,MAAqB,KAAK;IAE1B,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IACnF,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,gBAAgB,CAAC;IAC1D,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;IACpD,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;IAC5C,MAAM,gBAAgB,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACpF,MAAM,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,gBAAoC,CAAC,CAAC;IACrF,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IACrE,OAAO,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAC5C;;;;"}

package/esm/components/ScrollArea/utils/get-thumb-ratio.js

@@ -0,0 +1,7 @@
+function getThumbRatio(viewportSize, contentSize) {
+    const ratio = viewportSize / contentSize;
+    return Number.isNaN(ratio) ? 0 : ratio;
+}
+
+export { getThumbRatio };
+//# sourceMappingURL=get-thumb-ratio.js.map

package/esm/components/ScrollArea/utils/get-thumb-ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-thumb-ratio.js","sources":["../../../../src/components/ScrollArea/utils/get-thumb-ratio.tsx"],"sourcesContent":["export function getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize;\n  return Number.isNaN(ratio) ? 0 : ratio;\n}\n"],"names":[],"mappings":"SAAgB,aAAa,CAAC,YAAoB,EAAE,WAAmB;IACrE,MAAM,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;IACzC,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACzC;;;;"}

package/esm/components/ScrollArea/utils/get-thumb-size.js

@@ -0,0 +1,11 @@
+import { getThumbRatio } from './get-thumb-ratio.js';
+
+function getThumbSize(sizes) {
+    const ratio = getThumbRatio(sizes.viewport, sizes.content);
+    const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+    const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;
+    return Math.max(thumbSize, 18);
+}
+
+export { getThumbSize };
+//# sourceMappingURL=get-thumb-size.js.map

package/esm/components/ScrollArea/utils/get-thumb-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-thumb-size.js","sources":["../../../../src/components/ScrollArea/utils/get-thumb-size.tsx"],"sourcesContent":["import type { Sizes } from '../ScrollArea.types';\nimport { getThumbRatio } from './get-thumb-ratio';\n\nexport function getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content);\n  const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio;\n  return Math.max(thumbSize, 18);\n}\n"],"names":[],"mappings":";;SAGgB,YAAY,CAAC,KAAY;IACvC,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC3D,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;IACnF,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,gBAAgB,IAAI,KAAK,CAAC;IACpE,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACjC;;;;"}

package/esm/components/ScrollArea/utils/is-scrolling-within-scrollbar-bounds.js

@@ -0,0 +1,6 @@
+function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+    return scrollPos > 0 && scrollPos < maxScrollPos;
+}
+
+export { isScrollingWithinScrollbarBounds };
+//# sourceMappingURL=is-scrolling-within-scrollbar-bounds.js.map

package/esm/components/ScrollArea/utils/is-scrolling-within-scrollbar-bounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-scrolling-within-scrollbar-bounds.js","sources":["../../../../src/components/ScrollArea/utils/is-scrolling-within-scrollbar-bounds.ts"],"sourcesContent":["export function isScrollingWithinScrollbarBounds(scrollPos: number, maxScrollPos: number) {\n  return scrollPos > 0 && scrollPos < maxScrollPos;\n}\n"],"names":[],"mappings":"SAAgB,gCAAgC,CAAC,SAAiB,EAAE,YAAoB;IACtF,OAAO,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,YAAY,CAAC;AACnD;;;;"}

package/esm/components/ScrollArea/utils/linear-scale.js

@@ -0,0 +1,11 @@
+function linearScale(input, output) {
+    return (value) => {
+        if (input[0] === input[1] || output[0] === output[1])
+            return output[0];
+        const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+        return output[0] + ratio * (value - input[0]);
+    };
+}
+
+export { linearScale };
+//# sourceMappingURL=linear-scale.js.map

package/esm/components/ScrollArea/utils/linear-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linear-scale.js","sources":["../../../../src/components/ScrollArea/utils/linear-scale.ts"],"sourcesContent":["export function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0];\n    const ratio = (output[1] - output[0]) / (input[1] - input[0]);\n    return output[0] + ratio * (value - input[0]);\n  };\n}\n"],"names":[],"mappings":"SAAgB,WAAW,CAAC,KAAgC,EAAE,MAAiC;IAC7F,OAAO,CAAC,KAAa;QACnB,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;YAAE,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;QACvE,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;KAC/C,CAAC;AACJ;;;;"}

package/esm/components/ScrollArea/utils/to-int.js

@@ -0,0 +1,6 @@
+function toInt(value) {
+    return value ? parseInt(value, 10) : 0;
+}
+
+export { toInt };
+//# sourceMappingURL=to-int.js.map

package/esm/components/ScrollArea/utils/to-int.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-int.js","sources":["../../../../src/components/ScrollArea/utils/to-int.ts"],"sourcesContent":["export function toInt(value?: string) {\n  return value ? parseInt(value, 10) : 0;\n}\n"],"names":[],"mappings":"SAAgB,KAAK,CAAC,KAAc;IAClC,OAAO,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;AACzC;;;;"}

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,111 @@
+import { __rest } from 'tslib';
+import React, { useState, useRef, useEffect } from 'react';
+import { useUncontrolled, useId, useResizeObserver, useMergedRef } from '@mantine/hooks';
+import classes from './SegmentedControl.module.css.js';
+import { factory } from '../../core/factory/factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.js';
+import { useDirection } from '../../core/DirectionProvider/DirectionProvider.js';
+import { useMantineTheme } from '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js';
+import { Box } from '../../core/Box/Box.js';
+import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+import { getRadius, getSize, getFontSize } from '../../core/utils/get-size/get-size.js';
+import { getThemeColor } from '../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.js';
+
+const WRAPPER_PADDING = 4;
+const defaultProps = {
+    size: 'sm',
+    transitionDuration: 200,
+    transitionTimingFunction: 'ease',
+};
+const varsResolver = createVarsResolver((theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({
+    root: {
+        '--sc-radius': getRadius(radius),
+        '--sc-color': color ? getThemeColor(color, theme) : undefined,
+        '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',
+        '--sc-transition-duration': `${transitionDuration}ms`,
+        '--sc-transition-timing-function': transitionTimingFunction,
+        '--sc-padding': getSize(size, 'sc-padding'),
+        '--sc-font-size': getFontSize(size),
+    },
+}));
+const SegmentedControl = factory((_props, ref) => {
+    var _a, _b, _c, _d;
+    const props = useProps('SegmentedControl', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, vars, data, value, defaultValue, onChange, size, name, disabled, readOnly, fullWidth, orientation, radius, color, transitionDuration, transitionTimingFunction, variant } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "vars", "data", "value", "defaultValue", "onChange", "size", "name", "disabled", "readOnly", "fullWidth", "orientation", "radius", "color", "transitionDuration", "transitionTimingFunction", "variant"]);
+    const getStyles = useStyles({
+        name: 'SegmentedControl',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    const { dir } = useDirection();
+    const theme = useMantineTheme();
+    const _data = data.map((item) => typeof item === 'string' ? { label: item, value: item } : item);
+    const [_value, handleValueChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: Array.isArray(data)
+            ? (_d = (_b = (_a = _data.find((item) => !item.disabled)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : (_c = data[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : null
+            : null,
+        onChange,
+    });
+    const [activePosition, setActivePosition] = useState({
+        width: 0,
+        height: 0,
+        translate: [0, 0],
+    });
+    const uuid = useId(name);
+    const refs = useRef({});
+    const [observerRef, containerRect] = useResizeObserver();
+    useEffect(() => {
+        if (_value in refs.current && observerRef.current) {
+            const element = refs.current[_value];
+            const elementRect = element.getBoundingClientRect();
+            const scaledValue = element.offsetWidth / elementRect.width;
+            const width = element.clientWidth * scaledValue || 0;
+            const height = element.clientHeight * scaledValue || 0;
+            const offsetRight = containerRect.width - element.parentElement.offsetLeft + WRAPPER_PADDING - width;
+            const offsetLeft = element.parentElement.offsetLeft - WRAPPER_PADDING;
+            setActivePosition({
+                width,
+                height,
+                translate: [
+                    dir === 'rtl' ? offsetRight * -1 : offsetLeft,
+                    element.parentElement.offsetTop - WRAPPER_PADDING,
+                ],
+            });
+        }
+    }, [_value, containerRect, dir]);
+    const controls = _data.map((item) => (React.createElement(Box, Object.assign({}, getStyles('control'), { mod: { active: _value === item.value, orientation }, key: item.value }),
+        React.createElement("input", Object.assign({}, getStyles('input'), { disabled: disabled || item.disabled, type: "radio", name: uuid, value: item.value, id: `${uuid}-${item.value}`, checked: _value === item.value, onChange: () => !readOnly && handleValueChange(item.value), "data-focus-ring": theme.focusRing })),
+        React.createElement(Box, Object.assign({ component: "label" }, getStyles('label'), { mod: {
+                active: _value === item.value && !(disabled || item.disabled),
+                disabled: disabled || item.disabled,
+            }, htmlFor: `${uuid}-${item.value}`, ref: (node) => {
+                refs.current[item.value] = node;
+            }, __vars: {
+                '--sc-label-color': color !== undefined ? 'var(--mantine-color-white)' : undefined,
+            } }), item.label))));
+    const mergedRef = useMergedRef(observerRef, ref);
+    if (data.length === 0) {
+        return null;
+    }
+    return (React.createElement(Box, Object.assign({}, getStyles('root'), { variant: variant, size: size, ref: mergedRef, mod: { 'full-width': fullWidth, orientation } }, others, { role: "radiogroup" }),
+        typeof _value === 'string' && (React.createElement(Box, Object.assign({ component: "span" }, getStyles('indicator'), { __vars: {
+                '--sc-indicator-width': `${activePosition.width}px`,
+                '--sc-indicator-height': `${activePosition.height}px`,
+                '--sc-indicator-transform': `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px)`,
+            } }))),
+        controls));
+});
+SegmentedControl.displayName = '@mantine/core/SegmentedControl';
+
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.js.map

package/esm/components/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { useId, useMergedRef, useResizeObserver, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  MantineColor,\n  MantineSize,\n  MantineRadius,\n  useMantineTheme,\n  getRadius,\n  getThemeColor,\n  getSize,\n  getFontSize,\n  useDirection,\n  createVarsResolver,\n  Factory,\n} from '../../core';\nimport classes from './SegmentedControl.module.css';\n\nconst WRAPPER_PADDING = 4;\n\nexport type SegmentedControlStylesNames = 'root' | 'input' | 'label' | 'control' | 'indicator';\nexport type SegmentedControlVariant = string;\nexport type SegmentedControlCssVariables = {\n  root:\n    | '--sc-radius'\n    | '--sc-color'\n    | '--sc-font-size'\n    | '--sc-padding'\n    | '--sc-shadow'\n    | '--sc-transition-duration'\n    | '--sc-transition-timing-function';\n};\n\nexport interface SegmentedControlItem {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps\n  extends BoxProps,\n    StylesApiProps<SegmentedControlFactory>,\n    ElementProps<'div', 'onChange'> {\n  /** Data based on which controls are rendered */\n  data: (string | SegmentedControlItem)[];\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?(value: string): void;\n\n  /** Determines whether the component is disabled */\n  disabled?: boolean;\n\n  /** Name of the radio group, by default random name is generated */\n  name?: string;\n\n  /** Determines whether the component should take 100% width of its parent, `false` by default */\n  fullWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, changes color of indicator, by default color is based on current color scheme */\n  color?: MantineColor;\n\n  /** Controls `font-size`, `padding` and `height` properties, `'sm'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem, `theme.defaultRadius` by default */\n  radius?: MantineRadius | (string & {}) | number;\n\n  /** Indicator `transition-duration` in ms, set `0` to turn off transitions, `200` by default */\n  transitionDuration?: number;\n\n  /** Indicator `transition-timing-function` property, `ease` by default */\n  transitionTimingFunction?: string;\n\n  /** Determines in which orientation component id displayed, `'horizontal'` by default */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Determines whether the value can be changed */\n  readOnly?: boolean;\n}\n\nexport type SegmentedControlFactory = Factory<{\n  props: SegmentedControlProps;\n  ref: HTMLDivElement;\n  stylesNames: SegmentedControlStylesNames;\n  vars: SegmentedControlCssVariables;\n}>;\n\nconst defaultProps: Partial<SegmentedControlProps> = {\n  size: 'sm',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n};\n\nconst varsResolver = createVarsResolver<SegmentedControlFactory>(\n  (theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({\n    root: {\n      '--sc-radius': getRadius(radius),\n      '--sc-color': color ? getThemeColor(color, theme) : undefined,\n      '--sc-shadow': color ? undefined : 'var(--mantine-shadow-xs)',\n      '--sc-transition-duration': `${transitionDuration}ms`,\n      '--sc-transition-timing-function': transitionTimingFunction,\n      '--sc-padding': getSize(size, 'sc-padding'),\n      '--sc-font-size': getFontSize(size),\n    },\n  })\n);\n\nexport const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) => {\n  const props = useProps('SegmentedControl', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    data,\n    value,\n    defaultValue,\n    onChange,\n    size,\n    name,\n    disabled,\n    readOnly,\n    fullWidth,\n    orientation,\n    radius,\n    color,\n    transitionDuration,\n    transitionTimingFunction,\n    variant,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<SegmentedControlFactory>({\n    name: 'SegmentedControl',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  const { dir } = useDirection();\n  const theme = useMantineTheme();\n\n  const _data = data.map((item) =>\n    typeof item === 'string' ? { label: item, value: item } : item\n  );\n\n  const [_value, handleValueChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: Array.isArray(data)\n      ? _data.find((item) => !item.disabled)?.value ?? (data[0] as any)?.value ?? null\n      : null,\n    onChange,\n  });\n\n  const [activePosition, setActivePosition] = useState({\n    width: 0,\n    height: 0,\n    translate: [0, 0],\n  });\n  const uuid = useId(name);\n  const refs = useRef<Record<string, HTMLLabelElement>>({});\n  const [observerRef, containerRect] = useResizeObserver();\n\n  useEffect(() => {\n    if (_value in refs.current && observerRef.current) {\n      const element = refs.current[_value];\n      const elementRect = element.getBoundingClientRect();\n      const scaledValue = element.offsetWidth / elementRect.width;\n      const width = element.clientWidth * scaledValue || 0;\n      const height = element.clientHeight * scaledValue || 0;\n\n      const offsetRight =\n        containerRect.width - element.parentElement!.offsetLeft + WRAPPER_PADDING - width;\n      const offsetLeft = element.parentElement!.offsetLeft - WRAPPER_PADDING;\n\n      setActivePosition({\n        width,\n        height,\n        translate: [\n          dir === 'rtl' ? offsetRight * -1 : offsetLeft,\n          element.parentElement!.offsetTop - WRAPPER_PADDING,\n        ],\n      });\n    }\n  }, [_value, containerRect, dir]);\n\n  const controls = _data.map((item) => (\n    <Box\n      {...getStyles('control')}\n      mod={{ active: _value === item.value, orientation }}\n      key={item.value}\n    >\n      <input\n        {...getStyles('input')}\n        disabled={disabled || item.disabled}\n        type=\"radio\"\n        name={uuid}\n        value={item.value}\n        id={`${uuid}-${item.value}`}\n        checked={_value === item.value}\n        onChange={() => !readOnly && handleValueChange(item.value)}\n        data-focus-ring={theme.focusRing}\n      />\n\n      <Box\n        component=\"label\"\n        {...getStyles('label')}\n        mod={{\n          active: _value === item.value && !(disabled || item.disabled),\n          disabled: disabled || item.disabled,\n        }}\n        htmlFor={`${uuid}-${item.value}`}\n        ref={(node) => {\n          refs.current[item.value] = node!;\n        }}\n        __vars={{\n          '--sc-label-color': color !== undefined ? 'var(--mantine-color-white)' : undefined,\n        }}\n      >\n        {item.label}\n      </Box>\n    </Box>\n  ));\n\n  const mergedRef = useMergedRef(observerRef, ref);\n\n  if (data.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      variant={variant}\n      size={size}\n      ref={mergedRef}\n      mod={{ 'full-width': fullWidth, orientation }}\n      {...others}\n      role=\"radiogroup\"\n    >\n      {typeof _value === 'string' && (\n        <Box\n          component=\"span\"\n          {...getStyles('indicator')}\n          __vars={{\n            '--sc-indicator-width': `${activePosition.width}px`,\n            '--sc-indicator-height': `${activePosition.height}px`,\n            '--sc-indicator-transform': `translate(${activePosition.translate[0]}px, ${activePosition.translate[1]}px)`,\n          }}\n        />\n      )}\n\n      {controls}\n    </Box>\n  );\n});\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":[],"mappings":"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"}

package/esm/components/SegmentedControl/SegmentedControl.module.css.js

@@ -0,0 +1,4 @@
+var classes = {"root":"mantine-7LbAahg","indicator":"mantine---46L-G","label":"mantine-xOh3CVo","input":"mantine-i69xIe7","control":"mantine-y34erSP"};
+
+export default classes;
+//# sourceMappingURL=SegmentedControl.module.css.js.map

package/esm/components/SegmentedControl/SegmentedControl.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/esm/components/Slider/Marks/Marks.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { getPosition } from '../utils/get-position/get-position.js';
+import { isMarkFilled } from './is-mark-filled.js';
+import { useSliderContext } from '../Slider.context.js';
+import { Box } from '../../../core/Box/Box.js';
+
+function Marks({ marks, min, max, disabled, value, offset, inverted }) {
+    const { getStyles } = useSliderContext();
+    if (!marks) {
+        return null;
+    }
+    const items = marks.map((mark, index) => (React.createElement(Box, Object.assign({}, getStyles('markWrapper'), { __vars: { '--mark-offset': `${getPosition({ value: mark.value, min, max })}%` }, key: index }),
+        React.createElement(Box, Object.assign({}, getStyles('mark'), { mod: { filled: isMarkFilled({ mark, value, offset, inverted }), disabled } })),
+        mark.label && React.createElement("div", Object.assign({}, getStyles('markLabel')), mark.label))));
+    return React.createElement("div", null, items);
+}
+Marks.displayName = '@mantine/core/SliderMarks';
+
+export { Marks };
+//# sourceMappingURL=Marks.js.map

package/esm/components/Slider/Marks/Marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marks.js","sources":["../../../../src/components/Slider/Marks/Marks.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '../../../core';\nimport { getPosition } from '../utils/get-position/get-position';\nimport { isMarkFilled } from './is-mark-filled';\nimport { useSliderContext } from '../Slider.context';\n\nexport interface MarksProps {\n  marks: { value: number; label?: React.ReactNode }[] | 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    <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  return <div>{items}</div>;\n}\n\nMarks.displayName = '@mantine/core/SliderMarks';\n"],"names":[],"mappings":";;;;;;SAgBgB,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAc;IACtF,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEzC,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAClC,oBAAC,GAAG,oBACE,SAAS,CAAC,aAAa,CAAC,IAC5B,MAAM,EAAE,EAAE,eAAe,EAAE,GAAG,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,EAC/E,GAAG,EAAE,KAAK;QAEV,oBAAC,GAAG,oBACE,SAAS,CAAC,MAAM,CAAC,IACrB,GAAG,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,IAC1E;QACD,IAAI,CAAC,KAAK,IAAI,6CAAS,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,KAAK,CAAO,CAC9D,CACP,CAAC,CAAC;IAEH,OAAO,iCAAM,KAAK,CAAO,CAAC;AAC5B,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,2BAA2B;;;;"}

package/esm/components/Slider/Marks/is-mark-filled.js

@@ -0,0 +1,12 @@
+function isMarkFilled({ mark, offset, value, inverted = false }) {
+    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;
+}
+
+export { isMarkFilled };
+//# sourceMappingURL=is-mark-filled.js.map

package/esm/components/Slider/Marks/is-mark-filled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-mark-filled.js","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"],"names":[],"mappings":"SAOgB,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAgB;IAClF,OAAO,QAAQ;UACX,OAAO,MAAM,KAAK,QAAQ;cACxB,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK;cAC3C,IAAI,CAAC,KAAK,IAAI,KAAK;UACrB,OAAO,MAAM,KAAK,QAAQ;cAC1B,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK;cAC3C,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;AAC1B;;;;"}