@mantine/core 7.0.0-alpha.12 → 7.0.0-alpha.13

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

@@ -1 +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;;;;"}
+{"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":";;;AAEA,SAAS,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE;AAClC,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7C,CAAC;AACM,SAAS,wBAAwB,CAAC,SAAS,EAAE,KAAK,EAAE,GAAG,GAAG,KAAK,EAAE;AACxE,EAAE,MAAM,WAAW,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AAC1C,EAAE,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;AACrF,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAC5D,EAAE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;AACtD,EAAE,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,CAAC;AAC9C,EAAE,MAAM,gBAAgB,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtF,EAAE,MAAM,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC;AACnE,EAAE,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;AACvE,EAAE,OAAO,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAC5C;;;;"}

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

@@ -1,6 +1,6 @@
 function getThumbRatio(viewportSize, contentSize) {
-    const ratio = viewportSize / contentSize;
-    return Number.isNaN(ratio) ? 0 : ratio;
+  const ratio = viewportSize / contentSize;
+  return Number.isNaN(ratio) ? 0 : ratio;
 }
 
 export { getThumbRatio };

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

@@ -1 +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;;;;"}
+{"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":"AAAO,SAAS,aAAa,CAAC,YAAY,EAAE,WAAW,EAAE;AACzD,EAAE,MAAM,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;AAC3C,EAAE,OAAO,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AACzC;;;;"}

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

@@ -1,10 +1,10 @@
 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);
+  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 };

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

@@ -1 +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;;;;"}
+{"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":";;AACO,SAAS,YAAY,CAAC,KAAK,EAAE;AACpC,EAAE,MAAM,KAAK,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AAC7D,EAAE,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;AACrF,EAAE,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,gBAAgB,IAAI,KAAK,CAAC;AACtE,EAAE,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;AACjC;;;;"}

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

@@ -1,5 +1,5 @@
 function isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
-    return scrollPos > 0 && scrollPos < maxScrollPos;
+  return scrollPos > 0 && scrollPos < maxScrollPos;
 }
 
 export { isScrollingWithinScrollbarBounds };

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

@@ -1 +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;;;;"}
+{"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":"AAAO,SAAS,gCAAgC,CAAC,SAAS,EAAE,YAAY,EAAE;AAC1E,EAAE,OAAO,SAAS,GAAG,CAAC,IAAI,SAAS,GAAG,YAAY,CAAC;AACnD;;;;"}

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

@@ -1,10 +1,10 @@
 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]);
-    };
+  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 };

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

@@ -1 +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;;;;"}
+{"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":"AAAO,SAAS,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE;AAC3C,EAAE,OAAO,CAAC,KAAK,KAAK;AACpB,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC;AACxD,MAAM,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;AACvB,IAAI,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;AAClE,IAAI,OAAO,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAClD,GAAG,CAAC;AACJ;;;;"}

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

@@ -1,5 +1,5 @@
 function toInt(value) {
-    return value ? parseInt(value, 10) : 0;
+  return value ? parseInt(value, 10) : 0;
 }
 
 export { toInt };

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

@@ -1 +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;;;;"}
+{"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":"AAAO,SAAS,KAAK,CAAC,KAAK,EAAE;AAC7B,EAAE,OAAO,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC;AACzC;;;;"}

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,4 +1,3 @@
-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';
@@ -12,100 +11,224 @@ import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/c
 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';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 const WRAPPER_PADDING = 4;
 const defaultProps = {
-    size: 'sm',
-    transitionDuration: 200,
-    transitionTimingFunction: 'ease',
+  size: "sm",
+  transitionDuration: 200,
+  transitionTimingFunction: "ease"
 };
-const varsResolver = createVarsResolver((theme, { radius, color, transitionDuration, size, transitionTimingFunction }) => ({
+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),
-    },
-}));
+      "--sc-radius": getRadius(radius),
+      "--sc-color": color ? getThemeColor(color, theme) : void 0,
+      "--sc-shadow": color ? void 0 : "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;
+  var _b, _c, _d, _e;
+  const props = useProps("SegmentedControl", defaultProps, _props);
+  const _a = props, {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    data,
+    value,
+    defaultValue,
+    onChange,
+    size,
+    name,
+    disabled,
+    readOnly,
+    fullWidth,
+    orientation,
+    radius,
+    color,
+    transitionDuration,
+    transitionTimingFunction,
+    variant
+  } = _a, others = __objRest(_a, [
+    "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) ? (_e = (_d = (_b = _data.find((item) => !item.disabled)) == null ? void 0 : _b.value) != null ? _d : (_c = data[0]) == null ? void 0 : _c.value) != null ? _e : 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
+        ]
+      });
     }
-    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));
+  }, [_value, containerRect, dir]);
+  const controls = _data.map((item) => /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues({}, getStyles("control")), {
+      mod: { active: _value === item.value, orientation },
+      key: item.value
+    }),
+    /* @__PURE__ */ React.createElement(
+      "input",
+      __spreadProps(__spreadValues({}, 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
+      })
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box,
+      __spreadProps(__spreadValues({
+        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 !== void 0 ? "var(--mantine-color-white)" : void 0
+        }
+      }),
+      item.label
+    )
+  ));
+  const mergedRef = useMergedRef(observerRef, ref);
+  if (data.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, getStyles("root")), {
+      variant,
+      size,
+      ref: mergedRef,
+      mod: { "full-width": fullWidth, orientation }
+    }), others), {
+      role: "radiogroup"
+    }),
+    typeof _value === "string" && /* @__PURE__ */ React.createElement(
+      Box,
+      __spreadProps(__spreadValues({
+        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';
+SegmentedControl.classes = classes;
+SegmentedControl.displayName = "@mantine/core/SegmentedControl";
 
 export { SegmentedControl };
 //# sourceMappingURL=SegmentedControl.js.map

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

@@ -1 +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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"}
+{"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.classes = classes;\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":[],"mappings":"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"}

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

@@ -4,17 +4,47 @@ 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;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
     }
-    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);
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function Marks({ marks, min, max, disabled, value, offset, inverted }) {
+  const { getStyles } = useSliderContext();
+  if (!marks) {
+    return null;
+  }
+  const items = marks.map((mark, index) => /* @__PURE__ */ React.createElement(
+    Box,
+    __spreadProps(__spreadValues({}, getStyles("markWrapper")), {
+      __vars: { "--mark-offset": `${getPosition({ value: mark.value, min, max })}%` },
+      key: index
+    }),
+    /* @__PURE__ */ React.createElement(
+      Box,
+      __spreadProps(__spreadValues({}, getStyles("mark")), {
+        mod: { filled: isMarkFilled({ mark, value, offset, inverted }), disabled }
+      })
+    ),
+    mark.label && /* @__PURE__ */ React.createElement("div", __spreadValues({}, getStyles("markLabel")), mark.label)
+  ));
+  return /* @__PURE__ */ React.createElement("div", null, items);
 }
-Marks.displayName = '@mantine/core/SliderMarks';
+Marks.displayName = "@mantine/core/SliderMarks";
 
 export { Marks };
 //# sourceMappingURL=Marks.js.map

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

@@ -1 +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;;;;"}
+{"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":"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"}

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

@@ -1,11 +1,5 @@
 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;
+  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 };

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

@@ -1 +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;;;;"}
+{"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":"AAAO,SAAS,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;AACxE,EAAE,OAAO,QAAQ,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,OAAO,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;AACpN;;;;"}