@mantine/core 3.5.5 → 3.6.1

package/esm/components/Progress/Progress.styles.js

@@ -29,7 +29,7 @@ var useStyles = createStyles((theme, { color, radius, size, striped, animate })
     justifyContent: "center",
     alignItems: "center",
     backgroundColor: theme.fn.themeColor(color || theme.primaryColor, 6, false),
-    transition: `width 200ms ${theme.transitionTimingFunction}`,
+    transition: "width 100ms linear",
     animation: animate ? `${stripesAnimation} 1000ms linear infinite` : "none",
     backgroundSize: "20px 20px",
     backgroundImage: striped ? "linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)" : "none",

package/esm/components/Progress/Progress.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.styles.js","sources":["../../../src/components/Progress/Progress.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, keyframes } from '@mantine/styles';\n\nexport const sizes = {\n  xs: 3,\n  sm: 5,\n  md: 8,\n  lg: 12,\n  xl: 16,\n};\n\ninterface ProgressStyles {\n  color: MantineColor;\n  radius: MantineNumberSize;\n  size: MantineNumberSize;\n  striped: boolean;\n  animate: boolean;\n}\n\nconst stripesAnimation = keyframes({\n  from: { backgroundPosition: '0 0' },\n  to: { backgroundPosition: '40px 0' },\n});\n\nexport default createStyles((theme, { color, radius, size, striped, animate }: ProgressStyles) => ({\n  root: {\n    position: 'relative',\n    height: theme.fn.size({ size, sizes }),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    overflow: 'hidden',\n  },\n\n  bar: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.fn.themeColor(color || theme.primaryColor, 6, false),\n    transition: `width 200ms ${theme.transitionTimingFunction}`,\n    animation: animate ? `${stripesAnimation} 1000ms linear infinite` : 'none',\n    backgroundSize: '20px 20px',\n    backgroundImage: striped\n      ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'\n      : 'none',\n\n    '&:last-of-type': {\n      borderTopRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      borderBottomRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    },\n\n    '&:first-of-type': {\n      borderTopLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      borderBottomLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    },\n\n    '@media (prefers-reduced-motion)': {\n      transitionDuration: '0ms',\n    },\n  },\n\n  label: {\n    color: theme.white,\n    fontSize: theme.fn.size({ size, sizes }) * 0.65,\n    fontWeight: 700,\n    userSelect: 'none',\n    overflow: 'hidden',\n  },\n}));\n"],"names":[],"mappings":";;AACY,MAAC,KAAK,GAAG;AACrB,EAAE,EAAE,EAAE,CAAC;AACP,EAAE,EAAE,EAAE,CAAC;AACP,EAAE,EAAE,EAAE,CAAC;AACP,EAAE,EAAE,EAAE,EAAE;AACR,EAAE,EAAE,EAAE,EAAE;AACR,EAAE;AACF,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACnC,EAAE,IAAI,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE;AACrC,EAAE,EAAE,EAAE,EAAE,kBAAkB,EAAE,QAAQ,EAAE;AACtC,CAAC,CAAC,CAAC;AACH,gBAAe,YAAY,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM;AACnF,EAAE,IAAI,EAAE;AACR,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC1C,IAAI,eAAe,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/F,IAAI,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AACtE,IAAI,QAAQ,EAAE,QAAQ;AACtB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,GAAG,EAAE,CAAC;AACV,IAAI,MAAM,EAAE,CAAC;AACb,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,EAAE,MAAM;AAClB,IAAI,OAAO,EAAE,MAAM;AACnB,IAAI,cAAc,EAAE,QAAQ;AAC5B,IAAI,UAAU,EAAE,QAAQ;AACxB,IAAI,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,EAAE,KAAK,CAAC;AAC/E,IAAI,UAAU,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,wBAAwB,CAAC,CAAC;AAC/D,IAAI,SAAS,EAAE,OAAO,GAAG,CAAC,EAAE,gBAAgB,CAAC,uBAAuB,CAAC,GAAG,MAAM;AAC9E,IAAI,cAAc,EAAE,WAAW;AAC/B,IAAI,eAAe,EAAE,OAAO,GAAG,qLAAqL,GAAG,MAAM;AAC7N,IAAI,gBAAgB,EAAE;AACtB,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AAChF,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AACnF,KAAK;AACL,IAAI,iBAAiB,EAAE;AACvB,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AAC/E,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC;AAClF,KAAK;AACL,IAAI,iCAAiC,EAAE;AACvC,MAAM,kBAAkB,EAAE,KAAK;AAC/B,KAAK;AACL,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK;AACtB,IAAI,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI;AACnD,IAAI,UAAU,EAAE,GAAG;AACnB,IAAI,UAAU,EAAE,MAAM;AACtB,IAAI,QAAQ,EAAE,QAAQ;AACtB,GAAG;AACH,CAAC,CAAC,CAAC;;;;;"}
+{"version":3,"file":"Progress.styles.js","sources":["../../../src/components/Progress/Progress.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineColor, keyframes } from '@mantine/styles';\n\nexport const sizes = {\n  xs: 3,\n  sm: 5,\n  md: 8,\n  lg: 12,\n  xl: 16,\n};\n\ninterface ProgressStyles {\n  color: MantineColor;\n  radius: MantineNumberSize;\n  size: MantineNumberSize;\n  striped: boolean;\n  animate: boolean;\n}\n\nconst stripesAnimation = keyframes({\n  from: { backgroundPosition: '0 0' },\n  to: { backgroundPosition: '40px 0' },\n});\n\nexport default createStyles((theme, { color, radius, size, striped, animate }: ProgressStyles) => ({\n  root: {\n    position: 'relative',\n    height: theme.fn.size({ size, sizes }),\n    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],\n    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    overflow: 'hidden',\n  },\n\n  bar: {\n    position: 'absolute',\n    top: 0,\n    bottom: 0,\n    left: 0,\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: theme.fn.themeColor(color || theme.primaryColor, 6, false),\n    transition: 'width 100ms linear',\n    animation: animate ? `${stripesAnimation} 1000ms linear infinite` : 'none',\n    backgroundSize: '20px 20px',\n    backgroundImage: striped\n      ? 'linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)'\n      : 'none',\n\n    '&:last-of-type': {\n      borderTopRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      borderBottomRightRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    },\n\n    '&:first-of-type': {\n      borderTopLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      borderBottomLeftRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n    },\n\n    '@media (prefers-reduced-motion)': {\n      transitionDuration: '0ms',\n    },\n  },\n\n  label: {\n    color: theme.white,\n    fontSize: theme.fn.size({ size, sizes }) * 0.65,\n    fontWeight: 700,\n    userSelect: 'none',\n    overflow: 'hidden',\n  },\n}));\n"],"names":[],"mappings":"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"}

package/esm/components/RadioGroup/Radio/Radio.js

@@ -77,7 +77,7 @@ const Radio = forwardRef((_a, ref) => {
     type: "radio",
     id: uuid,
     disabled
-  }, rest)), /* @__PURE__ */ React.createElement("span", null, children)));
+  }, rest)), children && /* @__PURE__ */ React.createElement("span", null, children)));
 });
 Radio.displayName = "@mantine/core/Radio";
 

package/esm/components/RadioGroup/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../src/components/RadioGroup/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  extractMargins,\n} from '@mantine/styles';\nimport { Box } from '../../Box';\nimport useStyles from './Radio.styles';\n\nexport type RadioStylesNames = Exclude<ClassNames<typeof useStyles>, 'labelDisabled'>;\n\nexport interface RadioProps\n  extends DefaultProps<RadioStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {\n  /** Radio label */\n  children: React.ReactNode;\n\n  /** Radio value */\n  value: string;\n\n  /** Active radio color from theme.colors */\n  color?: MantineColor;\n\n  /** Predefined label fontSize, radio width, height and border-radius */\n  size?: MantineSize;\n\n  /** Static selector base */\n  __staticSelector?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      children,\n      size,\n      title,\n      disabled,\n      color,\n      classNames,\n      styles,\n      __staticSelector = 'Radio',\n      sx,\n      ...others\n    }: RadioProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles(\n      { color, size },\n      { classNames, styles, name: __staticSelector }\n    );\n    const { margins, rest } = extractMargins(others);\n    const uuid = useUuid(id);\n\n    return (\n      <Box\n        className={cx(classes.radioWrapper, className)}\n        style={style}\n        title={title}\n        sx={sx}\n        {...margins}\n      >\n        <label className={cx(classes.label, { [classes.labelDisabled]: disabled })} htmlFor={uuid}>\n          <input\n            ref={ref}\n            className={classes.radio}\n            type=\"radio\"\n            id={uuid}\n            disabled={disabled}\n            {...rest}\n          />\n          <span>{children}</span>\n        </label>\n      </Box>\n    );\n  }\n);\n\nRadio.displayName = '@mantine/core/Radio';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../../src/components/RadioGroup/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n  extractMargins,\n} from '@mantine/styles';\nimport { Box } from '../../Box';\nimport useStyles from './Radio.styles';\n\nexport type RadioStylesNames = Exclude<ClassNames<typeof useStyles>, 'labelDisabled'>;\n\nexport interface RadioProps\n  extends DefaultProps<RadioStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> {\n  /** Radio label */\n  children?: React.ReactNode;\n\n  /** Radio value */\n  value: string;\n\n  /** Active radio color from theme.colors */\n  color?: MantineColor;\n\n  /** Predefined label fontSize, radio width, height and border-radius */\n  size?: MantineSize;\n\n  /** Static selector base */\n  __staticSelector?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      children,\n      size,\n      title,\n      disabled,\n      color,\n      classNames,\n      styles,\n      __staticSelector = 'Radio',\n      sx,\n      ...others\n    }: RadioProps,\n    ref\n  ) => {\n    const { classes, cx } = useStyles(\n      { color, size },\n      { classNames, styles, name: __staticSelector }\n    );\n    const { margins, rest } = extractMargins(others);\n    const uuid = useUuid(id);\n\n    return (\n      <Box\n        className={cx(classes.radioWrapper, className)}\n        style={style}\n        title={title}\n        sx={sx}\n        {...margins}\n      >\n        <label className={cx(classes.label, { [classes.labelDisabled]: disabled })} htmlFor={uuid}>\n          <input\n            ref={ref}\n            className={classes.radio}\n            type=\"radio\"\n            id={uuid}\n            disabled={disabled}\n            {...rest}\n          />\n          {children && <span>{children}</span>}\n        </label>\n      </Box>\n    );\n  }\n);\n\nRadio.displayName = '@mantine/core/Radio';\n"],"names":[],"mappings":";;;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAQU,MAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AAC7C,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,EAAE;AACN,IAAI,QAAQ;AACZ,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,KAAK;AACT,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,gBAAgB,GAAG,OAAO;AAC9B,IAAI,EAAE;AACN,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,OAAO;AACX,IAAI,IAAI;AACR,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,kBAAkB;AACtB,IAAI,IAAI;AACR,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAC;AACrG,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;AACnD,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,EAAE,CAAC,CAAC;AAC3B,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC;AAClD,IAAI,KAAK;AACT,IAAI,KAAK;AACT,IAAI,EAAE;AACN,GAAG,EAAE,OAAO,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AAC5D,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,GAAG,QAAQ,EAAE,CAAC;AACvE,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC;AACjE,IAAI,GAAG;AACP,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,EAAE,EAAE,IAAI;AACZ,IAAI,QAAQ;AACZ,GAAG,EAAE,IAAI,CAAC,CAAC,EAAE,QAAQ,oBAAoB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;AACvF,CAAC,EAAE;AACH,KAAK,CAAC,WAAW,GAAG,qBAAqB;;;;"}

package/esm/components/ScrollArea/ScrollArea.js

@@ -1,5 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
+import { useMantineTheme } from '@mantine/styles';
 import useStyles from './ScrollArea.styles.js';
 import { Box } from '../Box/Box.js';
 
@@ -40,9 +41,10 @@ const ScrollArea = forwardRef((_a, ref) => {
     scrollbarSize = 12,
     scrollHideDelay = 1e3,
     type = "hover",
-    dir = "ltr",
+    dir,
     offsetScrollbars = false,
-    viewportRef
+    viewportRef,
+    onScrollPositionChange
   } = _b, others = __objRest(_b, [
     "children",
     "className",
@@ -53,21 +55,27 @@ const ScrollArea = forwardRef((_a, ref) => {
     "type",
     "dir",
     "offsetScrollbars",
-    "viewportRef"
+    "viewportRef",
+    "onScrollPositionChange"
   ]);
   const [scrollbarHovered, setScrollbarHovered] = useState(false);
-  const { classes, cx } = useStyles({ scrollbarSize, offsetScrollbars, dir, scrollbarHovered }, { name: "ScrollArea", classNames, styles });
+  const theme = useMantineTheme();
+  const { classes, cx } = useStyles({ scrollbarSize, offsetScrollbars, scrollbarHovered }, { name: "ScrollArea", classNames, styles });
   return /* @__PURE__ */ React.createElement(RadixScrollArea.Root, {
     type,
     scrollHideDelay,
-    dir,
+    dir: dir || theme.dir,
     ref,
     asChild: true
   }, /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className)
   }, others), /* @__PURE__ */ React.createElement(RadixScrollArea.Viewport, {
     className: classes.viewport,
-    ref: viewportRef
+    ref: viewportRef,
+    onScroll: typeof onScrollPositionChange === "function" ? ({ currentTarget }) => onScrollPositionChange({
+      x: currentTarget.scrollLeft,
+      y: currentTarget.scrollTop
+    }) : void 0
   }, children), /* @__PURE__ */ React.createElement(RadixScrollArea.Scrollbar, {
     orientation: "horizontal",
     className: classes.scrollbar,

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { DefaultProps, ClassNames } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './ScrollArea.styles';\n\nexport type ScrollAreaStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ScrollAreaProps\n  extends DefaultProps<ScrollAreaStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Scrollbar size in px */\n  scrollbarSize?: number;\n\n  /** Scrollbars type */\n  type?: 'auto' | 'always' | 'scroll' | 'hover';\n\n  /** Scroll hide delay in ms, for scroll and hover types only */\n  scrollHideDelay?: number;\n\n  /** Reading direction of the scroll area */\n  dir?: 'ltr' | 'rtl';\n\n  /** Should scrollbars be offset with padding */\n  offsetScrollbars?: boolean;\n\n  /** Get viewport ref */\n  viewportRef?: React.ForwardedRef<HTMLDivElement>;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      children,\n      className,\n      classNames,\n      styles,\n      scrollbarSize = 12,\n      scrollHideDelay = 1000,\n      type = 'hover',\n      dir = 'ltr',\n      offsetScrollbars = false,\n      viewportRef,\n      ...others\n    }: ScrollAreaProps,\n    ref\n  ) => {\n    const [scrollbarHovered, setScrollbarHovered] = useState(false);\n    const { classes, cx } = useStyles(\n      { scrollbarSize, offsetScrollbars, dir, scrollbarHovered },\n      { name: 'ScrollArea', classNames, styles }\n    );\n\n    return (\n      <RadixScrollArea.Root\n        type={type}\n        scrollHideDelay={scrollHideDelay}\n        dir={dir}\n        ref={ref}\n        asChild\n      >\n        <Box className={cx(classes.root, className)} {...others}>\n          <RadixScrollArea.Viewport className={classes.viewport} ref={viewportRef}>\n            {children}\n          </RadixScrollArea.Viewport>\n          <RadixScrollArea.Scrollbar\n            orientation=\"horizontal\"\n            className={classes.scrollbar}\n            forceMount\n            onMouseEnter={() => setScrollbarHovered(true)}\n            onMouseLeave={() => setScrollbarHovered(false)}\n          >\n            <RadixScrollArea.Thumb className={classes.thumb} />\n          </RadixScrollArea.Scrollbar>\n          <RadixScrollArea.Scrollbar\n            orientation=\"vertical\"\n            className={classes.scrollbar}\n            forceMount\n            onMouseEnter={() => setScrollbarHovered(true)}\n            onMouseLeave={() => setScrollbarHovered(false)}\n          >\n            <RadixScrollArea.Thumb className={classes.thumb} />\n          </RadixScrollArea.Scrollbar>\n          <RadixScrollArea.Corner className={classes.corner} />\n        </Box>\n      </RadixScrollArea.Root>\n    );\n  }\n);\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useState, forwardRef } from 'react';\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { DefaultProps, ClassNames, useMantineTheme } from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles from './ScrollArea.styles';\n\nexport type ScrollAreaStylesNames = ClassNames<typeof useStyles>;\n\nexport interface ScrollAreaProps\n  extends DefaultProps<ScrollAreaStylesNames>,\n    React.ComponentPropsWithoutRef<'div'> {\n  /** Scrollbar size in px */\n  scrollbarSize?: number;\n\n  /** Scrollbars type */\n  type?: 'auto' | 'always' | 'scroll' | 'hover';\n\n  /** Scroll hide delay in ms, for scroll and hover types only */\n  scrollHideDelay?: number;\n\n  /** Reading direction of the scroll area */\n  dir?: 'ltr' | 'rtl';\n\n  /** Should scrollbars be offset with padding */\n  offsetScrollbars?: boolean;\n\n  /** Get viewport ref */\n  viewportRef?: React.ForwardedRef<HTMLDivElement>;\n\n  /** Subscribe to scroll position changes */\n  onScrollPositionChange?(position: { x: number; y: number }): void;\n}\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(\n  (\n    {\n      children,\n      className,\n      classNames,\n      styles,\n      scrollbarSize = 12,\n      scrollHideDelay = 1000,\n      type = 'hover',\n      dir,\n      offsetScrollbars = false,\n      viewportRef,\n      onScrollPositionChange,\n      ...others\n    }: ScrollAreaProps,\n    ref\n  ) => {\n    const [scrollbarHovered, setScrollbarHovered] = useState(false);\n    const theme = useMantineTheme();\n    const { classes, cx } = useStyles(\n      { scrollbarSize, offsetScrollbars, scrollbarHovered },\n      { name: 'ScrollArea', classNames, styles }\n    );\n\n    return (\n      <RadixScrollArea.Root\n        type={type}\n        scrollHideDelay={scrollHideDelay}\n        dir={dir || theme.dir}\n        ref={ref}\n        asChild\n      >\n        <Box className={cx(classes.root, className)} {...others}>\n          <RadixScrollArea.Viewport\n            className={classes.viewport}\n            ref={viewportRef}\n            onScroll={\n              typeof onScrollPositionChange === 'function'\n                ? ({ currentTarget }) =>\n                    onScrollPositionChange({\n                      x: currentTarget.scrollLeft,\n                      y: currentTarget.scrollTop,\n                    })\n                : undefined\n            }\n          >\n            {children}\n          </RadixScrollArea.Viewport>\n          <RadixScrollArea.Scrollbar\n            orientation=\"horizontal\"\n            className={classes.scrollbar}\n            forceMount\n            onMouseEnter={() => setScrollbarHovered(true)}\n            onMouseLeave={() => setScrollbarHovered(false)}\n          >\n            <RadixScrollArea.Thumb className={classes.thumb} />\n          </RadixScrollArea.Scrollbar>\n          <RadixScrollArea.Scrollbar\n            orientation=\"vertical\"\n            className={classes.scrollbar}\n            forceMount\n            onMouseEnter={() => setScrollbarHovered(true)}\n            onMouseLeave={() => setScrollbarHovered(false)}\n          >\n            <RadixScrollArea.Thumb className={classes.thumb} />\n          </RadixScrollArea.Scrollbar>\n          <RadixScrollArea.Corner className={classes.corner} />\n        </Box>\n      </RadixScrollArea.Root>\n    );\n  }\n);\n\nScrollArea.displayName = '@mantine/core/ScrollArea';\n"],"names":[],"mappings":"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"}

package/esm/components/ScrollArea/ScrollArea.styles.js

@@ -1,6 +1,6 @@
 import { createStyles } from '@mantine/styles';
 
-var useStyles = createStyles((theme, { scrollbarSize, dir, offsetScrollbars, scrollbarHovered }, getRef) => {
+var useStyles = createStyles((theme, { scrollbarSize, offsetScrollbars, scrollbarHovered }, getRef) => {
   const thumb = getRef("thumb");
   return {
     root: {
@@ -9,8 +9,7 @@ var useStyles = createStyles((theme, { scrollbarSize, dir, offsetScrollbars, scr
     viewport: {
       width: "100%",
       height: "100%",
-      paddingRight: dir === "ltr" && offsetScrollbars ? scrollbarSize : void 0,
-      paddingLeft: dir === "rtl" && offsetScrollbars ? scrollbarSize : void 0
+      paddingRight: offsetScrollbars ? scrollbarSize : void 0
     },
     scrollbar: {
       display: "flex",

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.styles.js","sources":["../../../src/components/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ScrollAreaStyles {\n  scrollbarSize: number;\n  dir: 'ltr' | 'rtl';\n  offsetScrollbars: boolean;\n  scrollbarHovered: boolean;\n}\n\nexport default createStyles(\n  (theme, { scrollbarSize, dir, offsetScrollbars, scrollbarHovered }: ScrollAreaStyles, getRef) => {\n    const thumb = getRef('thumb');\n    return {\n      root: {\n        overflow: 'hidden',\n      },\n\n      viewport: {\n        width: '100%',\n        height: '100%',\n        paddingRight: dir === 'ltr' && offsetScrollbars ? scrollbarSize : undefined,\n        paddingLeft: dir === 'rtl' && offsetScrollbars ? scrollbarSize : undefined,\n      },\n\n      scrollbar: {\n        display: 'flex',\n        userSelect: 'none',\n        touchAction: 'none',\n        boxSizing: 'border-box',\n        padding: scrollbarSize / 5,\n        transition: 'background-color 150ms ease, opacity 150ms ease',\n\n        '&:hover': {\n          backgroundColor:\n            theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n          [`& .${thumb}`]: {\n            backgroundColor:\n              theme.colorScheme === 'dark'\n                ? theme.fn.rgba('#ffffff', 0.5)\n                : theme.fn.rgba(theme.black, 0.5),\n          },\n        },\n\n        '&[data-orientation=\"vertical\"]': {\n          width: scrollbarSize,\n        },\n\n        '&[data-orientation=\"horizontal\"]': {\n          flexDirection: 'column',\n          height: scrollbarSize,\n        },\n\n        '&[data-state=\"hidden\"]': {\n          opacity: 0,\n        },\n      },\n\n      thumb: {\n        ref: thumb,\n        flex: 1,\n        backgroundColor:\n          theme.colorScheme === 'dark'\n            ? theme.fn.rgba('#ffffff', 0.4)\n            : theme.fn.rgba(theme.black, 0.4),\n        borderRadius: scrollbarSize,\n        position: 'relative',\n        transition: 'background-color 150ms ease',\n\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          width: '100%',\n          height: '100%',\n          minWidth: 44,\n          minHeight: 44,\n        },\n      },\n\n      corner: {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n        transition: 'opacity 150ms ease',\n        opacity: scrollbarHovered ? 1 : 0,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollArea.styles.js","sources":["../../../src/components/ScrollArea/ScrollArea.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\n\ninterface ScrollAreaStyles {\n  scrollbarSize: number;\n  offsetScrollbars: boolean;\n  scrollbarHovered: boolean;\n}\n\nexport default createStyles(\n  (theme, { scrollbarSize, offsetScrollbars, scrollbarHovered }: ScrollAreaStyles, getRef) => {\n    const thumb = getRef('thumb');\n    return {\n      root: {\n        overflow: 'hidden',\n      },\n\n      viewport: {\n        width: '100%',\n        height: '100%',\n        paddingRight: offsetScrollbars ? scrollbarSize : undefined,\n      },\n\n      scrollbar: {\n        display: 'flex',\n        userSelect: 'none',\n        touchAction: 'none',\n        boxSizing: 'border-box',\n        padding: scrollbarSize / 5,\n        transition: 'background-color 150ms ease, opacity 150ms ease',\n\n        '&:hover': {\n          backgroundColor:\n            theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],\n          [`& .${thumb}`]: {\n            backgroundColor:\n              theme.colorScheme === 'dark'\n                ? theme.fn.rgba('#ffffff', 0.5)\n                : theme.fn.rgba(theme.black, 0.5),\n          },\n        },\n\n        '&[data-orientation=\"vertical\"]': {\n          width: scrollbarSize,\n        },\n\n        '&[data-orientation=\"horizontal\"]': {\n          flexDirection: 'column',\n          height: scrollbarSize,\n        },\n\n        '&[data-state=\"hidden\"]': {\n          opacity: 0,\n        },\n      },\n\n      thumb: {\n        ref: thumb,\n        flex: 1,\n        backgroundColor:\n          theme.colorScheme === 'dark'\n            ? theme.fn.rgba('#ffffff', 0.4)\n            : theme.fn.rgba(theme.black, 0.4),\n        borderRadius: scrollbarSize,\n        position: 'relative',\n        transition: 'background-color 150ms ease',\n\n        '&::before': {\n          content: '\"\"',\n          position: 'absolute',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          width: '100%',\n          height: '100%',\n          minWidth: 44,\n          minHeight: 44,\n        },\n      },\n\n      corner: {\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],\n        transition: 'opacity 150ms ease',\n        opacity: scrollbarHovered ? 1 : 0,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}

package/esm/components/SegmentedControl/SegmentedControl.js

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { useReducedMotion, useUncontrolled, useUuid, useResizeObserver } from '@mantine/hooks';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { useReducedMotion, useUncontrolled, useUuid, useResizeObserver, useMergedRef } from '@mantine/hooks';
 import useStyles, { WRAPPER_PADDING } from './SegmentedControl.styles.js';
 import { Box } from '../Box/Box.js';
 
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function SegmentedControl(_a) {
+const SegmentedControl = forwardRef((_a, ref) => {
   var _b = _a, {
     className,
     data: _data,
@@ -73,7 +73,7 @@ function SegmentedControl(_a) {
     onChange,
     rule: (val) => !!val
   });
-  const { classes, cx } = useStyles({
+  const { classes, cx, theme } = useStyles({
     size,
     fullWidth,
     color,
@@ -85,23 +85,24 @@ function SegmentedControl(_a) {
   const [activePosition, setActivePosition] = useState({ width: 0, translate: 0 });
   const uuid = useUuid(name);
   const refs = useRef({});
-  const [ref, containerRect] = useResizeObserver();
+  const [observerRef, containerRect] = useResizeObserver();
   useEffect(() => {
-    if (_value in refs.current && ref.current) {
+    if (_value in refs.current && observerRef.current) {
       const element = refs.current[_value];
       const elementRect = element.getBoundingClientRect();
       const scaledValue = element.offsetWidth / elementRect.width;
+      const width = elementRect.width * scaledValue || 0;
+      const offsetRight = containerRect.width - element.parentElement.offsetLeft + WRAPPER_PADDING - width;
+      const offsetLeft = element.parentElement.offsetLeft - WRAPPER_PADDING;
       setActivePosition({
-        width: elementRect.width * scaledValue,
-        translate: element.parentElement.offsetLeft - WRAPPER_PADDING
+        width,
+        translate: theme.dir === "rtl" ? offsetRight : offsetLeft
       });
-      if (!shouldAnimate) {
-        setTimeout(() => {
-          setShouldAnimate(true);
-        }, 4);
-      }
     }
   }, [_value, containerRect]);
+  useEffect(() => {
+    setShouldAnimate(true);
+  }, []);
   const controls = data.map((item) => /* @__PURE__ */ React.createElement("div", {
     className: cx(classes.control, { [classes.controlActive]: _value === item.value }),
     key: item.value
@@ -122,15 +123,16 @@ function SegmentedControl(_a) {
   }, item.label)));
   return /* @__PURE__ */ React.createElement(Box, __spreadValues({
     className: cx(classes.root, className),
-    ref
-  }, others), !!_value && /* @__PURE__ */ React.createElement("span", {
+    ref: useMergedRef(observerRef, ref)
+  }, others), !!_value && /* @__PURE__ */ React.createElement(Box, {
+    component: "span",
     className: classes.active,
-    style: {
+    sx: {
       width: activePosition.width,
       transform: `translateX(${activePosition.translate}px)`
     }
   }), controls);
-}
+});
 SegmentedControl.displayName = "@mantine/core/SegmentedControl";
 
 export { SegmentedControl };

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 { useReducedMotion, useResizeObserver, useUncontrolled, useUuid } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { WRAPPER_PADDING } from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem<T extends string> {\n  value: T;\n  label: React.ReactNode;\n}\n\nexport type SegmentedControlStylesNames = ClassNames<typeof useStyles>;\n\nexport interface SegmentedControlProps<T extends string>\n  extends DefaultProps<SegmentedControlStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Data based on which controls are rendered */\n  data: T[] | SegmentedControlItem<T>[];\n\n  /** Current selected value */\n  value?: T;\n\n  /** Called when value changes */\n  onChange?(value: T): void;\n\n  /** Name of the radio group, default to random id */\n  name?: string;\n\n  /** True if component should have 100% width */\n  fullWidth?: boolean;\n\n  /** Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark */\n  color?: MantineColor;\n\n  /** Controls font-size, paddings and height */\n  size?: MantineSize;\n\n  /** Border-radius from theme or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Transition duration in ms, set to 0 to turn off transitions */\n  transitionDuration?: number;\n\n  /** Transition timing function for all transitions, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n}\n\nexport function SegmentedControl<T extends string = string>({\n  className,\n  data: _data,\n  name,\n  value,\n  onChange,\n  color,\n  fullWidth,\n  radius = 'sm',\n  size = 'sm',\n  transitionDuration = 200,\n  transitionTimingFunction,\n  classNames,\n  styles,\n  defaultValue,\n  ...others\n}: SegmentedControlProps<T>) {\n  const reduceMotion = useReducedMotion();\n  const data = _data.map((item: any) =>\n    typeof item === 'string' ? { label: item, value: item } : item\n  );\n\n  const [shouldAnimate, setShouldAnimate] = useState(false);\n  const [_value, handleValueChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: Array.isArray(data) ? data[0].value : null,\n    onChange,\n    rule: (val) => !!val,\n  });\n\n  const { classes, cx } = useStyles(\n    {\n      size,\n      fullWidth,\n      color,\n      radius,\n      shouldAnimate: reduceMotion || !shouldAnimate,\n      transitionDuration,\n      transitionTimingFunction,\n    },\n    { classNames, styles, name: 'SegmentedControl' }\n  );\n\n  const [activePosition, setActivePosition] = useState({ width: 0, translate: 0 });\n  const uuid = useUuid(name);\n  const refs = useRef<Record<string, HTMLLabelElement>>({});\n  const [ref, containerRect] = useResizeObserver();\n\n  useEffect(() => {\n    if (_value in refs.current && ref.current) {\n      const element = refs.current[_value];\n      const elementRect = element.getBoundingClientRect();\n\n      // Scaled value to undo transforms applied\n      const scaledValue = element.offsetWidth / elementRect.width;\n      setActivePosition({\n        width: elementRect.width * scaledValue,\n        translate: element.parentElement.offsetLeft - WRAPPER_PADDING,\n      });\n\n      if (!shouldAnimate) {\n        setTimeout(() => {\n          setShouldAnimate(true);\n        }, 4);\n      }\n    }\n  }, [_value, containerRect]);\n\n  const controls = data.map((item) => (\n    <div\n      className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n      key={item.value}\n    >\n      <input\n        className={classes.input}\n        type=\"radio\"\n        name={uuid}\n        value={item.value}\n        id={`${uuid}-${item.value}`}\n        checked={_value === item.value}\n        onChange={() => handleValueChange(item.value)}\n      />\n\n      <label\n        className={cx(classes.label, { [classes.labelActive]: _value === item.value })}\n        htmlFor={`${uuid}-${item.value}`}\n        ref={(node) => {\n          refs.current[item.value] = node;\n        }}\n      >\n        {item.label}\n      </label>\n    </div>\n  ));\n\n  return (\n    <Box className={cx(classes.root, className)} ref={ref} {...others}>\n      {!!_value && (\n        <span\n          className={classes.active}\n          style={{\n            width: activePosition.width,\n            transform: `translateX(${activePosition.translate}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, forwardRef } from 'react';\nimport {\n  useReducedMotion,\n  useResizeObserver,\n  useUncontrolled,\n  useUuid,\n  useMergedRef,\n} from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineSize,\n  MantineColor,\n  ClassNames,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport useStyles, { WRAPPER_PADDING } from './SegmentedControl.styles';\n\nexport interface SegmentedControlItem {\n  value: string;\n  label: React.ReactNode;\n}\n\nexport type SegmentedControlStylesNames = ClassNames<typeof useStyles>;\n\nexport interface SegmentedControlProps\n  extends DefaultProps<SegmentedControlStylesNames>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, 'value' | 'onChange'> {\n  /** Data based on which controls are rendered */\n  data: string[] | SegmentedControlItem[];\n\n  /** Current selected value */\n  value?: string;\n\n  /** Called when value changes */\n  onChange?(value: string): void;\n\n  /** Name of the radio group, default to random id */\n  name?: string;\n\n  /** True if component should have 100% width */\n  fullWidth?: boolean;\n\n  /** Active control color from theme.colors, defaults to white in light color scheme and theme.colors.dark[9] in dark */\n  color?: MantineColor;\n\n  /** Controls font-size, paddings and height */\n  size?: MantineSize;\n\n  /** Border-radius from theme or number to set border-radius in px */\n  radius?: MantineNumberSize;\n\n  /** Transition duration in ms, set to 0 to turn off transitions */\n  transitionDuration?: number;\n\n  /** Transition timing function for all transitions, defaults to theme.transitionTimingFunction */\n  transitionTimingFunction?: string;\n\n  /** Default value for uncontrolled component */\n  defaultValue?: string;\n}\n\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  (\n    {\n      className,\n      data: _data,\n      name,\n      value,\n      onChange,\n      color,\n      fullWidth,\n      radius = 'sm',\n      size = 'sm',\n      transitionDuration = 200,\n      transitionTimingFunction,\n      classNames,\n      styles,\n      defaultValue,\n      ...others\n    },\n    ref\n  ) => {\n    const reduceMotion = useReducedMotion();\n    const data = _data.map((item: any) =>\n      typeof item === 'string' ? { label: item, value: item } : item\n    );\n\n    const [shouldAnimate, setShouldAnimate] = useState(false);\n    const [_value, handleValueChange] = useUncontrolled({\n      value,\n      defaultValue,\n      finalValue: Array.isArray(data) ? data[0].value : null,\n      onChange,\n      rule: (val) => !!val,\n    });\n\n    const { classes, cx, theme } = useStyles(\n      {\n        size,\n        fullWidth,\n        color,\n        radius,\n        shouldAnimate: reduceMotion || !shouldAnimate,\n        transitionDuration,\n        transitionTimingFunction,\n      },\n      { classNames, styles, name: 'SegmentedControl' }\n    );\n\n    const [activePosition, setActivePosition] = useState({ width: 0, translate: 0 });\n    const uuid = useUuid(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 = elementRect.width * 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          translate: theme.dir === 'rtl' ? offsetRight : offsetLeft,\n        });\n      }\n    }, [_value, containerRect]);\n\n    useEffect(() => {\n      setShouldAnimate(true);\n    }, []);\n\n    const controls = data.map((item) => (\n      <div\n        className={cx(classes.control, { [classes.controlActive]: _value === item.value })}\n        key={item.value}\n      >\n        <input\n          className={classes.input}\n          type=\"radio\"\n          name={uuid}\n          value={item.value}\n          id={`${uuid}-${item.value}`}\n          checked={_value === item.value}\n          onChange={() => handleValueChange(item.value)}\n        />\n\n        <label\n          className={cx(classes.label, { [classes.labelActive]: _value === item.value })}\n          htmlFor={`${uuid}-${item.value}`}\n          ref={(node) => {\n            refs.current[item.value] = node;\n          }}\n        >\n          {item.label}\n        </label>\n      </div>\n    ));\n\n    return (\n      <Box className={cx(classes.root, className)} ref={useMergedRef(observerRef, ref)} {...others}>\n        {!!_value && (\n          <Box\n            component=\"span\"\n            className={classes.active}\n            sx={{\n              width: activePosition.width,\n              transform: `translateX(${activePosition.translate}px)`,\n            }}\n          />\n        )}\n\n        {controls}\n      </Box>\n    );\n  }\n);\n\nSegmentedControl.displayName = '@mantine/core/SegmentedControl';\n"],"names":[],"mappings":";;;;;AAAA,IAAI,SAAS,GAAG,MAAM,CAAC,cAAc,CAAC;AACtC,IAAI,mBAAmB,GAAG,MAAM,CAAC,qBAAqB,CAAC;AACvD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC;AACnD,IAAI,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC;AACzD,IAAI,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAChK,IAAI,cAAc,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK;AAC/B,EAAE,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AAClC,MAAM,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AACxC,EAAE,IAAI,mBAAmB;AACzB,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE;AAC7C,MAAM,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC;AACpC,QAAQ,eAAe,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1C,KAAK;AACL,EAAE,OAAO,CAAC,CAAC;AACX,CAAC,CAAC;AACF,IAAI,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK;AACrC,EAAE,IAAI,MAAM,GAAG,EAAE,CAAC;AAClB,EAAE,KAAK,IAAI,IAAI,IAAI,MAAM;AACzB,IAAI,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACpE,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,EAAE,IAAI,MAAM,IAAI,IAAI,IAAI,mBAAmB;AAC3C,IAAI,KAAK,IAAI,IAAI,IAAI,mBAAmB,CAAC,MAAM,CAAC,EAAE;AAClD,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AACtE,QAAQ,MAAM,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,EAAE,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAWU,MAAC,gBAAgB,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK;AACxD,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE;AACf,IAAI,SAAS;AACb,IAAI,IAAI,EAAE,KAAK;AACf,IAAI,IAAI;AACR,IAAI,KAAK;AACT,IAAI,QAAQ;AACZ,IAAI,KAAK;AACT,IAAI,SAAS;AACb,IAAI,MAAM,GAAG,IAAI;AACjB,IAAI,IAAI,GAAG,IAAI;AACf,IAAI,kBAAkB,GAAG,GAAG;AAC5B,IAAI,wBAAwB;AAC5B,IAAI,UAAU;AACd,IAAI,MAAM;AACV,IAAI,YAAY;AAChB,GAAG,GAAG,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC,EAAE,EAAE;AACjC,IAAI,WAAW;AACf,IAAI,MAAM;AACV,IAAI,MAAM;AACV,IAAI,OAAO;AACX,IAAI,UAAU;AACd,IAAI,OAAO;AACX,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,MAAM;AACV,IAAI,oBAAoB;AACxB,IAAI,0BAA0B;AAC9B,IAAI,YAAY;AAChB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;AAC1C,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,QAAQ,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;AACnG,EAAE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC5D,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,eAAe,CAAC;AACtD,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,IAAI,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI;AAC1D,IAAI,QAAQ;AACZ,IAAI,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG;AACxB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;AAC3C,IAAI,IAAI;AACR,IAAI,SAAS;AACb,IAAI,KAAK;AACT,IAAI,MAAM;AACV,IAAI,aAAa,EAAE,YAAY,IAAI,CAAC,aAAa;AACjD,IAAI,kBAAkB;AACtB,IAAI,wBAAwB;AAC5B,GAAG,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAC;AACvD,EAAE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;AACnF,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAC7B,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;AAC1B,EAAE,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,GAAG,iBAAiB,EAAE,CAAC;AAC3D,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,EAAE;AACvD,MAAM,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC;AAClE,MAAM,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,GAAG,WAAW,IAAI,CAAC,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,GAAG,eAAe,GAAG,KAAK,CAAC;AAC3G,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,UAAU,GAAG,eAAe,CAAC;AAC5E,MAAM,iBAAiB,CAAC;AACxB,QAAQ,KAAK;AACb,QAAQ,SAAS,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,GAAG,WAAW,GAAG,UAAU;AACjE,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;AAC9B,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjF,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;AACtF,IAAI,GAAG,EAAE,IAAI,CAAC,KAAK;AACnB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AAClD,IAAI,SAAS,EAAE,OAAO,CAAC,KAAK;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,IAAI,EAAE,IAAI;AACd,IAAI,KAAK,EAAE,IAAI,CAAC,KAAK;AACrB,IAAI,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC,KAAK;AAClC,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AACjD,GAAG,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE;AACnD,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,WAAW,GAAG,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;AAClF,IAAI,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AACpC,IAAI,GAAG,EAAE,CAAC,IAAI,KAAK;AACnB,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;AACtC,KAAK;AACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACnB,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE,cAAc,CAAC;AACjE,IAAI,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC;AAC1C,IAAI,GAAG,EAAE,YAAY,CAAC,WAAW,EAAE,GAAG,CAAC;AACvC,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,oBAAoB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACnE,IAAI,SAAS,EAAE,MAAM;AACrB,IAAI,SAAS,EAAE,OAAO,CAAC,MAAM;AAC7B,IAAI,EAAE,EAAE;AACR,MAAM,KAAK,EAAE,cAAc,CAAC,KAAK;AACjC,MAAM,SAAS,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC;AAC5D,KAAK;AACL,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;AAChB,CAAC,EAAE;AACH,gBAAgB,CAAC,WAAW,GAAG,gCAAgC;;;;"}

package/esm/components/SegmentedControl/SegmentedControl.styles.js

@@ -36,40 +36,41 @@ var useStyles = createStyles((theme, {
   transitionTimingFunction,
   size
 }, getRef) => {
-  const label = __spreadProps(__spreadValues(__spreadValues({
-    ref: getRef("label")
-  }, theme.fn.focusStyles()), theme.fn.fontStyles()), {
-    WebkitTapHighlightColor: "transparent",
-    borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
-    fontWeight: 500,
-    fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,
-    cursor: "pointer",
-    display: "block",
-    textAlign: "center",
-    padding: sizes[size in sizes ? size : "sm"],
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
-    transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
-    "&:hover": {
-      color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
-    }
-  });
-  const control = {
-    ref: getRef("control"),
-    position: "relative",
-    boxSizing: "border-box",
-    flex: 1,
-    zIndex: 2,
-    transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
-    "&:not(:first-of-type)": {
-      borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
-    }
-  };
+  const label = getRef("label");
+  const control = getRef("control");
   return {
-    label,
-    control,
+    label: __spreadProps(__spreadValues(__spreadValues({
+      ref: label
+    }, theme.fn.focusStyles()), theme.fn.fontStyles()), {
+      WebkitTapHighlightColor: "transparent",
+      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),
+      fontWeight: 500,
+      fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,
+      cursor: "pointer",
+      display: "block",
+      textAlign: "center",
+      padding: sizes[size in sizes ? size : "sm"],
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      userSelect: "none",
+      color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
+      transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
+      "&:hover": {
+        color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black
+      }
+    }),
+    control: {
+      ref: control,
+      position: "relative",
+      boxSizing: "border-box",
+      flex: 1,
+      zIndex: 2,
+      transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${transitionTimingFunction || theme.transitionTimingFunction}`,
+      "&:not(:first-of-type)": {
+        borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
+      }
+    },
     input: {
       height: 0,
       width: 0,
@@ -79,12 +80,12 @@ var useStyles = createStyles((theme, {
       opacity: 0,
       "&:focus": {
         outline: "none",
-        [`& + .${label.ref}`]: {
+        [`& + .${label}`]: {
           outline: "none",
           boxShadow: `0 0 0 2px ${theme.colorScheme === "dark" ? theme.colors.dark[9] : theme.white}, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`
         },
         "&:focus:not(:focus-visible)": {
-          [`& + .${label.ref}`]: {
+          [`& + .${label}`]: {
             boxShadow: "none"
           }
         }
@@ -100,7 +101,7 @@ var useStyles = createStyles((theme, {
     },
     controlActive: {
       borderLeftColor: "transparent !important",
-      [`& + .${control.ref}`]: {
+      [`& + .${control}`]: {
         borderLeftColor: "transparent !important"
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\ninterface SegmentedControlStyles {\n  fullWidth: boolean;\n  color: MantineColor;\n  radius: MantineNumberSize;\n  shouldAnimate: boolean;\n  transitionDuration: number;\n  transitionTimingFunction: string;\n  size: MantineSize;\n}\n\nconst sizes = {\n  xs: '3px 6px',\n  sm: '5px 10px',\n  md: '7px 14px',\n  lg: '9px 16px',\n  xl: '12px 20px',\n};\n\nexport default createStyles(\n  (\n    theme,\n    {\n      fullWidth,\n      color,\n      radius,\n      shouldAnimate,\n      transitionDuration,\n      transitionTimingFunction,\n      size,\n    }: SegmentedControlStyles,\n    getRef\n  ) => {\n    const label = {\n      ref: getRef('label'),\n      ...theme.fn.focusStyles(),\n      ...theme.fn.fontStyles(),\n      WebkitTapHighlightColor: 'transparent',\n      borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n      fontWeight: 500,\n      fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n      cursor: 'pointer',\n      display: 'block',\n      textAlign: 'center',\n      padding: sizes[size in sizes ? size : 'sm'],\n      whiteSpace: 'nowrap',\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n      transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n        transitionTimingFunction || theme.transitionTimingFunction\n      }`,\n\n      '&:hover': {\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n      },\n    } as const;\n\n    const control = {\n      ref: getRef('control'),\n      position: 'relative',\n      boxSizing: 'border-box',\n      flex: 1,\n      zIndex: 2,\n      transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n        transitionTimingFunction || theme.transitionTimingFunction\n      }`,\n\n      '&:not(:first-of-type)': {\n        borderLeft: `1px solid ${\n          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n        }`,\n      },\n    } as const;\n\n    return {\n      label,\n      control,\n\n      input: {\n        height: 0,\n        width: 0,\n        position: 'absolute',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        opacity: 0,\n\n        // input is hidden by default, these styles add focus to label when user navigates with keyboard\n        '&:focus': {\n          outline: 'none',\n\n          [`& + .${label.ref}`]: {\n            outline: 'none',\n            boxShadow: `0 0 0 2px ${\n              theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n            }, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`,\n          },\n\n          '&:focus:not(:focus-visible)': {\n            [`& + .${label.ref}`]: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n\n      root: {\n        position: 'relative',\n        display: fullWidth ? 'flex' : 'inline-flex',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n        borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        overflow: 'hidden',\n        padding: WRAPPER_PADDING,\n      },\n\n      controlActive: {\n        borderLeftColor: 'transparent !important',\n\n        [`& + .${control.ref}`]: {\n          borderLeftColor: 'transparent !important',\n        },\n      },\n\n      labelActive: {\n        '&, &:hover': {\n          color: color in theme.colors || theme.colorScheme === 'dark' ? theme.white : theme.black,\n        },\n      },\n\n      active: {\n        boxSizing: 'border-box',\n        borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        position: 'absolute',\n        top: 4,\n        bottom: 4,\n        zIndex: 1,\n        boxShadow: color || theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n        transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n          theme.transitionTimingFunction\n        }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n          transitionTimingFunction || theme.transitionTimingFunction\n        }`,\n        backgroundColor:\n          color in theme.colors\n            ? theme.fn.themeColor(color, 6)\n            : theme.colorScheme === 'dark'\n            ? theme.colors.dark[5]\n            : theme.white,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SegmentedControl.styles.js","sources":["../../../src/components/SegmentedControl/SegmentedControl.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize, MantineSize, MantineColor } from '@mantine/styles';\n\nexport const WRAPPER_PADDING = 4;\n\ninterface SegmentedControlStyles {\n  fullWidth: boolean;\n  color: MantineColor;\n  radius: MantineNumberSize;\n  shouldAnimate: boolean;\n  transitionDuration: number;\n  transitionTimingFunction: string;\n  size: MantineSize;\n}\n\nconst sizes = {\n  xs: '3px 6px',\n  sm: '5px 10px',\n  md: '7px 14px',\n  lg: '9px 16px',\n  xl: '12px 20px',\n};\n\nexport default createStyles(\n  (\n    theme,\n    {\n      fullWidth,\n      color,\n      radius,\n      shouldAnimate,\n      transitionDuration,\n      transitionTimingFunction,\n      size,\n    }: SegmentedControlStyles,\n    getRef\n  ) => {\n    const label = getRef('label');\n    const control = getRef('control');\n\n    return {\n      label: {\n        ref: label,\n        ...theme.fn.focusStyles(),\n        ...theme.fn.fontStyles(),\n        WebkitTapHighlightColor: 'transparent',\n        borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        fontWeight: 500,\n        fontSize: size in theme.fontSizes ? theme.fontSizes[size] : theme.fontSizes.sm,\n        cursor: 'pointer',\n        display: 'block',\n        textAlign: 'center',\n        padding: sizes[size in sizes ? size : 'sm'],\n        whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n        userSelect: 'none',\n        color: theme.colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.gray[7],\n        transition: `color ${shouldAnimate ? 0 : transitionDuration}ms ${\n          transitionTimingFunction || theme.transitionTimingFunction\n        }`,\n\n        '&:hover': {\n          color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,\n        },\n      },\n\n      control: {\n        ref: control,\n        position: 'relative',\n        boxSizing: 'border-box',\n        flex: 1,\n        zIndex: 2,\n        transition: `border-left-color ${shouldAnimate ? 0 : transitionDuration}ms ${\n          transitionTimingFunction || theme.transitionTimingFunction\n        }`,\n\n        '&:not(:first-of-type)': {\n          borderLeft: `1px solid ${\n            theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n          }`,\n        },\n      },\n\n      input: {\n        height: 0,\n        width: 0,\n        position: 'absolute',\n        overflow: 'hidden',\n        whiteSpace: 'nowrap',\n        opacity: 0,\n\n        // input is hidden by default, these styles add focus to label when user navigates with keyboard\n        '&:focus': {\n          outline: 'none',\n\n          [`& + .${label}`]: {\n            outline: 'none',\n            boxShadow: `0 0 0 2px ${\n              theme.colorScheme === 'dark' ? theme.colors.dark[9] : theme.white\n            }, 0 0 0 4px ${theme.colors[theme.primaryColor][5]}`,\n          },\n\n          '&:focus:not(:focus-visible)': {\n            [`& + .${label}`]: {\n              boxShadow: 'none',\n            },\n          },\n        },\n      },\n\n      root: {\n        position: 'relative',\n        display: fullWidth ? 'flex' : 'inline-flex',\n        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[1],\n        borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        overflow: 'hidden',\n        padding: WRAPPER_PADDING,\n      },\n\n      controlActive: {\n        borderLeftColor: 'transparent !important',\n\n        [`& + .${control}`]: {\n          borderLeftColor: 'transparent !important',\n        },\n      },\n\n      labelActive: {\n        '&, &:hover': {\n          color: color in theme.colors || theme.colorScheme === 'dark' ? theme.white : theme.black,\n        },\n      },\n\n      active: {\n        boxSizing: 'border-box',\n        borderRadius: theme.fn.size({ size: radius, sizes: theme.radius }),\n        position: 'absolute',\n        top: 4,\n        bottom: 4,\n        zIndex: 1,\n        boxShadow: color || theme.colorScheme === 'dark' ? 'none' : theme.shadows.xs,\n        transition: `transform ${shouldAnimate ? 0 : transitionDuration}ms ${\n          theme.transitionTimingFunction\n        }, width ${shouldAnimate ? 0 : transitionDuration / 2}ms ${\n          transitionTimingFunction || theme.transitionTimingFunction\n        }`,\n        backgroundColor:\n          color in theme.colors\n            ? theme.fn.themeColor(color, 6)\n            : theme.colorScheme === 'dark'\n            ? theme.colors.dark[5]\n            : theme.white,\n      },\n    };\n  }\n);\n"],"names":[],"mappings":"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"}

package/esm/components/Select/Select.js

@@ -7,8 +7,8 @@ import { getSelectRightSectionProps } from './SelectRightSection/get-select-righ
 import { SelectItems } from './SelectItems/SelectItems.js';
 import { SelectDropdown } from './SelectDropdown/SelectDropdown.js';
 import { filterData } from './filter-data/filter-data.js';
-import { groupSortData } from '../../utils/group-sort-data/group-sort-data.js';
 import useStyles from './Select.styles.js';
+import { groupOptions } from '../../utils/group-options/group-options.js';
 import { InputWrapper } from '../InputWrapper/InputWrapper.js';
 import { Input } from '../Input/Input.js';
 
@@ -47,7 +47,7 @@ function defaultFilter(value, item) {
   return item.label.toLowerCase().trim().includes(value.toLowerCase().trim());
 }
 function defaultShouldCreate(query, data) {
-  return !!query && !data.some((item) => item.value.toLowerCase() === query.toLowerCase());
+  return !!query && !data.some((item) => item.label.toLowerCase() === query.toLowerCase());
 }
 const Select = forwardRef((_a, ref) => {
   var _b = _a, {
@@ -89,6 +89,7 @@ const Select = forwardRef((_a, ref) => {
     creatable = false,
     getCreateLabel,
     shouldCreate = defaultShouldCreate,
+    selectOnBlur = false,
     onCreate,
     sx,
     dropdownComponent,
@@ -139,6 +140,7 @@ const Select = forwardRef((_a, ref) => {
     "creatable",
     "getCreateLabel",
     "shouldCreate",
+    "selectOnBlur",
     "onCreate",
     "sx",
     "dropdownComponent",
@@ -176,7 +178,7 @@ const Select = forwardRef((_a, ref) => {
   const isCreatable = creatable && typeof getCreateLabel === "function";
   let createLabel = null;
   const formattedData = data.map((item) => typeof item === "string" ? { label: item, value: item } : item);
-  const sortedData = groupSortData({ data: formattedData });
+  const sortedData = groupOptions({ data: formattedData });
   const [_value, handleChange, inputMode] = useUncontrolled({
     value,
     defaultValue,
@@ -226,7 +228,7 @@ const Select = forwardRef((_a, ref) => {
         handleSearchChange(item.label);
       }
       setHovered(-1);
-      setTimeout(() => setDropdownOpened(false));
+      setDropdownOpened(false);
       inputRef.current.focus();
     }
   };
@@ -337,6 +339,9 @@ const Select = forwardRef((_a, ref) => {
   const handleInputBlur = (event) => {
     typeof onBlur === "function" && onBlur(event);
     const selected = sortedData.find((item) => item.value === _value);
+    if (selectOnBlur && filteredData[hovered] && dropdownOpened) {
+      handleItemSelect(filteredData[hovered]);
+    }
     handleSearchChange((selected == null ? void 0 : selected.label) || "");
     setDropdownOpened(false);
   };
@@ -344,6 +349,7 @@ const Select = forwardRef((_a, ref) => {
     typeof onFocus === "function" && onFocus(event);
     if (searchable) {
       setDropdownOpened(true);
+      scrollSelectedItemIntoView();
     }
   };
   const handleInputChange = (event) => {
@@ -355,12 +361,12 @@ const Select = forwardRef((_a, ref) => {
     setDropdownOpened(true);
   };
   const handleInputClick = () => {
+    let dropdownOpen = true;
     if (!searchable) {
-      setDropdownOpened(!dropdownOpened);
-    } else {
-      setDropdownOpened(true);
+      dropdownOpen = !dropdownOpened;
     }
-    if (_value && !dropdownOpened) {
+    setDropdownOpened(dropdownOpen);
+    if (_value && dropdownOpen) {
       setHovered(selectedItemIndex);
       scrollSelectedItemIntoView();
     }