@mantine/core 6.0.11 → 7.0.0-alpha.10

package/esm/components/Tabs/TabsPanel/TabsPanel.js

@@ -0,0 +1,26 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useTabsContext } from '../Tabs.context.js';
+import { factory } from '../../../core/factory/factory.js';
+import { useProps } from '../../../core/MantineProvider/use-props/use-props.js';
+import { Box } from '../../../core/Box/Box.js';
+
+const defaultProps = {};
+const TabsPanel = factory((_props, ref) => {
+    const props = useProps('TabsPanel', defaultProps, _props);
+    const { children, className, value, classNames, styles, style } = props, others = __rest(props, ["children", "className", "value", "classNames", "styles", "style"]);
+    const ctx = useTabsContext();
+    const active = ctx.value === value;
+    const content = ctx.keepMounted ? children : active ? children : null;
+    return (React.createElement(Box, Object.assign({}, others, ctx.getStyles('panel', {
+        className,
+        classNames,
+        styles,
+        style: [style, !active ? { display: 'none' } : undefined],
+        props,
+    }), { ref: ref, mod: { orientation: ctx.orientation }, role: "tabpanel", id: ctx.getPanelId(value), "aria-labelledby": ctx.getTabId(value) }), content));
+});
+TabsPanel.displayName = '@mantine/core/TabsPanel';
+
+export { TabsPanel };
+//# sourceMappingURL=TabsPanel.js.map

package/esm/components/Tabs/TabsPanel/TabsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.js","sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  BoxProps,\n  useProps,\n  factory,\n  ElementProps,\n  StylesApiProps,\n  Factory,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps,\n    StylesApiProps<TabsPanelFactory>,\n    ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TabsPanelProps> = {};\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props, ref) => {\n  const props = useProps('TabsPanel', defaultProps, _props);\n  const { children, className, value, classNames, styles, style, ...others } = props;\n\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const content = ctx.keepMounted ? children : active ? children : null;\n\n  return (\n    <Box\n      {...others}\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      ref={ref}\n      mod={{ orientation: ctx.orientation }}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"names":[],"mappings":";;;;;;;AAgCA,MAAM,YAAY,GAA4B,EAAE,CAAC;MAEpC,SAAS,GAAG,OAAO,CAAmB,CAAC,MAAM,EAAE,GAAG;IAC7D,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IAC1D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,KAAgB,KAAK,EAAhB,MAAM,UAAK,KAAK,EAA5E,mEAAoE,CAAQ,CAAC;IAEnF,MAAM,GAAG,GAAG,cAAc,EAAE,CAAC;IAE7B,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;IACnC,MAAM,OAAO,GAAG,GAAG,CAAC,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC;IAEtE,QACE,oBAAC,GAAG,oBACE,MAAM,EACN,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE;QACzB,SAAS;QACT,UAAU;QACV,MAAM;QACN,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACzD,KAAK;KACN,CAAC,IACF,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,EACrC,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,qBACR,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,KAEnC,OAAO,CACJ,EACN;AACJ,CAAC,EAAE;AAEH,SAAS,CAAC,WAAW,GAAG,yBAAyB;;;;"}

package/esm/components/Tabs/TabsTab/TabsTab.js

@@ -0,0 +1,47 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useTabsContext } from '../Tabs.context.js';
+import { UnstyledButton } from '../../UnstyledButton/UnstyledButton.js';
+import { createScopedKeydownHandler } from '../../../core/utils/create-scoped-keydown-handler/create-scoped-keydown-handler.js';
+import { factory } from '../../../core/factory/factory.js';
+import { useProps } from '../../../core/MantineProvider/use-props/use-props.js';
+import { useMantineTheme } from '../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js';
+import { useDirection } from '../../../core/DirectionProvider/DirectionProvider.js';
+import { getThemeColor } from '../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.js';
+
+const defaultProps = {};
+const TabsTab = factory((_props, ref) => {
+    const props = useProps('TabsTab', defaultProps, _props);
+    const { className, children, rightSection, leftSection, value, onClick, onKeyDown, disabled, color, style, classNames, styles, vars } = props, others = __rest(props, ["className", "children", "rightSection", "leftSection", "value", "onClick", "onKeyDown", "disabled", "color", "style", "classNames", "styles", "vars"]);
+    const theme = useMantineTheme();
+    const { dir } = useDirection();
+    const ctx = useTabsContext();
+    const active = value === ctx.value;
+    const activateTab = (event) => {
+        ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    const stylesApiProps = { classNames, styles, props };
+    return (React.createElement(UnstyledButton, Object.assign({}, others, ctx.getStyles('tab', Object.assign({ className, style, variant: ctx.variant }, stylesApiProps)), { disabled: disabled, unstyled: ctx.unstyled, variant: ctx.variant, mod: {
+            active,
+            disabled,
+            orientation: ctx.orientation,
+            inverted: ctx.inverted,
+            placement: ctx.orientation === 'vertical' && ctx.placement,
+        }, ref: ref, role: "tab", id: ctx.getTabId(value), "aria-selected": active, tabIndex: active || ctx.value === null ? 0 : -1, "aria-controls": ctx.getPanelId(value), onClick: activateTab, __vars: { '--tabs-color': color ? getThemeColor(color, theme) : undefined }, onKeyDown: createScopedKeydownHandler({
+            siblingSelector: '[role="tab"]',
+            parentSelector: '[role="tablist"]',
+            activateOnFocus: ctx.activateTabWithKeyboard,
+            loop: ctx.loop,
+            orientation: ctx.orientation || 'horizontal',
+            dir,
+            onKeyDown,
+        }) }),
+        leftSection && (React.createElement("span", Object.assign({}, ctx.getStyles('tabSection', stylesApiProps), { "data-position": "left" }), leftSection)),
+        children && React.createElement("span", Object.assign({}, ctx.getStyles('tabLabel', stylesApiProps)), children),
+        rightSection && (React.createElement("span", Object.assign({}, ctx.getStyles('tabSection', stylesApiProps), { "data-position": "right" }), rightSection))));
+});
+TabsTab.displayName = '@mantine/core/TabsTab';
+
+export { TabsTab };
+//# sourceMappingURL=TabsTab.js.map

package/esm/components/Tabs/TabsTab/TabsTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTab.js","sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  useProps,\n  factory,\n  ElementProps,\n  MantineColor,\n  createScopedKeydownHandler,\n  useDirection,\n  useMantineTheme,\n  getThemeColor,\n  StylesApiProps,\n  Factory,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\n\nexport type TabsTabStylesNames = 'tab' | 'tabSection' | 'tabLabel';\n\nexport interface TabsTabProps\n  extends Omit<UnstyledButtonProps, 'classNames' | 'styles' | 'vars'>,\n    StylesApiProps<TabsTabFactory>,\n    ElementProps<'button'> {\n  /** Value of associated panel */\n  value: string;\n\n  /** Tab label */\n  children?: React.ReactNode;\n\n  /** Content displayed on the right side of the label, for example, icon */\n  rightSection?: React.ReactNode;\n\n  /** Content displayed on the left side of the label, for example, icon */\n  leftSection?: React.ReactNode;\n\n  /** Key of `theme.colors` or any valid CSS color, controls control color based on `variant` */\n  color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n  props: TabsTabProps;\n  ref: HTMLButtonElement;\n  stylesNames: TabsTabStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<TabsTabProps> = {};\n\nexport const TabsTab = factory<TabsTabFactory>((_props, ref) => {\n  const props = useProps('TabsTab', defaultProps, _props);\n  const {\n    className,\n    children,\n    rightSection,\n    leftSection,\n    value,\n    onClick,\n    onKeyDown,\n    disabled,\n    color,\n    style,\n    classNames,\n    styles,\n    vars,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const { dir } = useDirection();\n  const ctx = useTabsContext();\n  const active = value === ctx.value;\n  const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n    onClick?.(event);\n  };\n\n  const stylesApiProps = { classNames, styles, props };\n\n  return (\n    <UnstyledButton\n      {...others}\n      {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n      disabled={disabled}\n      unstyled={ctx.unstyled}\n      variant={ctx.variant}\n      mod={{\n        active,\n        disabled,\n        orientation: ctx.orientation,\n        inverted: ctx.inverted,\n        placement: ctx.orientation === 'vertical' && ctx.placement,\n      }}\n      ref={ref}\n      role=\"tab\"\n      id={ctx.getTabId(value)}\n      aria-selected={active}\n      tabIndex={active || ctx.value === null ? 0 : -1}\n      aria-controls={ctx.getPanelId(value)}\n      onClick={activateTab}\n      __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n      onKeyDown={createScopedKeydownHandler({\n        siblingSelector: '[role=\"tab\"]',\n        parentSelector: '[role=\"tablist\"]',\n        activateOnFocus: ctx.activateTabWithKeyboard,\n        loop: ctx.loop,\n        orientation: ctx.orientation || 'horizontal',\n        dir,\n        onKeyDown,\n      })}\n    >\n      {leftSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n          {leftSection}\n        </span>\n      )}\n      {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n      {rightSection && (\n        <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n          {rightSection}\n        </span>\n      )}\n    </UnstyledButton>\n  );\n});\n\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"names":[],"mappings":"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"}

package/esm/components/Text/Text.js

@@ -0,0 +1,62 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import classes from './Text.module.css.js';
+import { getFontSize, getLineHeight } from '../../core/utils/get-size/get-size.js';
+import { getGradient } from '../../core/MantineProvider/color-functions/get-gradient/get-gradient.js';
+import { polymorphicFactory } from '../../core/factory/polymorphic-factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.js';
+import { Box } from '../../core/Box/Box.js';
+import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+
+function getTextTruncate(truncate) {
+    if (truncate === 'start') {
+        return 'start';
+    }
+    if (truncate === 'end' || truncate) {
+        return 'end';
+    }
+    return undefined;
+}
+const defaultProps = {
+    variant: 'text',
+    inherit: false,
+    size: 'md',
+};
+const varsResolver = createVarsResolver((theme, { variant, lineClamp, gradient, size }) => ({
+    root: {
+        '--text-fz': getFontSize(size),
+        '--text-lh': getLineHeight(size),
+        '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,
+        '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,
+    },
+}));
+const Text = polymorphicFactory((_props, ref) => {
+    const props = useProps('Text', defaultProps, _props);
+    const { lineClamp, truncate, inline, inherit, gradient, span, __staticSelector, vars, className, style, classNames, styles, unstyled, variant, mod, size } = props, others = __rest(props, ["lineClamp", "truncate", "inline", "inherit", "gradient", "span", "__staticSelector", "vars", "className", "style", "classNames", "styles", "unstyled", "variant", "mod", "size"]);
+    const getStyles = useStyles({
+        name: ['Text', __staticSelector],
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    return (React.createElement(Box, Object.assign({}, getStyles('root', { focusable: true }), { ref: ref, component: span ? 'span' : 'p', variant: variant, mod: [
+            {
+                'data-truncate': getTextTruncate(truncate),
+                'data-line-clamp': typeof lineClamp === 'number',
+                'data-inline': inline,
+                'data-inherit': inherit,
+            },
+            mod,
+        ], size: size }, others)));
+});
+Text.displayName = '@mantine/core/Text';
+
+export { Text };
+//# sourceMappingURL=Text.js.map

package/esm/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  BoxProps,\n  StylesApiProps,\n  polymorphicFactory,\n  MantineGradient,\n  useStyles,\n  useProps,\n  getGradient,\n  BoxMod,\n  createVarsResolver,\n  PolymorphicFactory,\n  MantineSize,\n  getFontSize,\n  getLineHeight,\n} from '../../core';\nimport classes from './Text.module.css';\n\ntype TextTruncate = 'end' | 'start' | boolean;\n\nfunction getTextTruncate(truncate: TextTruncate | undefined) {\n  if (truncate === 'start') {\n    return 'start';\n  }\n\n  if (truncate === 'end' || truncate) {\n    return 'end';\n  }\n\n  return undefined;\n}\n\nexport type TextStylesNames = 'root';\nexport type TextVariant = 'text' | 'gradient';\nexport type TextCssVariables = {\n  root: '--text-gradient' | '--text-line-clamp' | '--text-fz' | '--text-lh';\n};\n\nexport interface TextProps extends BoxProps, StylesApiProps<TextFactory> {\n  __staticSelector?: string;\n  mod?: BoxMod;\n\n  /** Controls `font-size` and `line-height`, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Number of lines after which Text will be truncated */\n  lineClamp?: number;\n\n  /** Side on which Text must be truncated, if `true`, text in truncated from the start */\n  truncate?: TextTruncate;\n\n  /** Sets `line-height` to 1 for centering, `false` by default */\n  inline?: boolean;\n\n  /** Determines whether font properties should be inherited from the parent, `false` by default */\n  inherit?: boolean;\n\n  /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */\n  gradient?: MantineGradient;\n\n  /** Shorthand for `component=\"span\"`, `false` by default, default root element is `p` */\n  span?: boolean;\n}\n\nexport type TextFactory = PolymorphicFactory<{\n  props: TextProps;\n  defaultComponent: 'div';\n  defaultRef: HTMLParagraphElement;\n  stylesNames: TextStylesNames;\n  vars: TextCssVariables;\n  variant: TextVariant;\n}>;\n\nconst defaultProps: Partial<TextProps> = {\n  variant: 'text',\n  inherit: false,\n  size: 'md',\n};\n\nconst varsResolver = createVarsResolver<TextFactory>(\n  (theme, { variant, lineClamp, gradient, size }) => ({\n    root: {\n      '--text-fz': getFontSize(size),\n      '--text-lh': getLineHeight(size),\n      '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n      '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n    },\n  })\n);\n\nexport const Text = polymorphicFactory<TextFactory>((_props, ref) => {\n  const props = useProps('Text', defaultProps, _props);\n  const {\n    lineClamp,\n    truncate,\n    inline,\n    inherit,\n    gradient,\n    span,\n    __staticSelector,\n    vars,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    variant,\n    mod,\n    size,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TextFactory>({\n    name: ['Text', __staticSelector],\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      {...getStyles('root', { focusable: true })}\n      ref={ref}\n      component={span ? 'span' : 'p'}\n      variant={variant}\n      mod={[\n        {\n          'data-truncate': getTextTruncate(truncate),\n          'data-line-clamp': typeof lineClamp === 'number',\n          'data-inline': inline,\n          'data-inherit': inherit,\n        },\n        mod,\n      ]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nText.displayName = '@mantine/core/Text';\n"],"names":[],"mappings":";;;;;;;;;;;AAqBA,SAAS,eAAe,CAAC,QAAkC;IACzD,IAAI,QAAQ,KAAK,OAAO,EAAE;QACxB,OAAO,OAAO,CAAC;KAChB;IAED,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,EAAE;QAClC,OAAO,KAAK,CAAC;KACd;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AA2CD,MAAM,YAAY,GAAuB;IACvC,OAAO,EAAE,MAAM;IACf,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,CACrC,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM;IAClD,IAAI,EAAE;QACJ,WAAW,EAAE,WAAW,CAAC,IAAI,CAAC;QAC9B,WAAW,EAAE,aAAa,CAAC,IAAI,CAAC;QAChC,iBAAiB,EAAE,OAAO,KAAK,UAAU,GAAG,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,SAAS;QACpF,mBAAmB,EAAE,OAAO,SAAS,KAAK,QAAQ,GAAG,SAAS,CAAC,QAAQ,EAAE,GAAG,SAAS;KACtF;CACF,CAAC,CACH,CAAC;MAEW,IAAI,GAAG,kBAAkB,CAAc,CAAC,MAAM,EAAE,GAAG;IAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IACrD,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,EACH,IAAI,KAEF,KAAK,EADJ,MAAM,UACP,KAAK,EAlBH,kLAkBL,CAAQ,CAAC;IAEV,MAAM,SAAS,GAAG,SAAS,CAAc;QACvC,IAAI,EAAE,CAAC,MAAM,EAAE,gBAAgB,CAAC;QAChC,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,QACE,oBAAC,GAAG,oBACE,SAAS,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,IAC1C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,GAAG,EAC9B,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE;YACH;gBACE,eAAe,EAAE,eAAe,CAAC,QAAQ,CAAC;gBAC1C,iBAAiB,EAAE,OAAO,SAAS,KAAK,QAAQ;gBAChD,aAAa,EAAE,MAAM;gBACrB,cAAc,EAAE,OAAO;aACxB;YACD,GAAG;SACJ,EACD,IAAI,EAAE,IAAI,IACN,MAAM,EACV,EACF;AACJ,CAAC,EAAE;AAEH,IAAI,CAAC,WAAW,GAAG,oBAAoB;;;;"}

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

@@ -0,0 +1,4 @@
+var classes = {"root":"mantine-HAmVvpP"};
+
+export default classes;
+//# sourceMappingURL=Text.module.css.js.map

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

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

package/esm/components/TextInput/TextInput.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { InputBase } from '../InputBase/InputBase.js';
+import { factory } from '../../core/factory/factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+
+const defaultProps = {};
+const TextInput = factory((props, ref) => {
+    const _props = useProps('TextInput', defaultProps, props);
+    return React.createElement(InputBase, Object.assign({ component: "input", ref: ref }, _props, { __staticSelector: "TextInput" }));
+});
+TextInput.displayName = '@mantine/core/TextInput';
+
+export { TextInput };
+//# sourceMappingURL=TextInput.js.map

package/esm/components/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { factory, ElementProps, useProps, Factory } from '../../core';\nimport { InputBase, InputBaseProps } from '../InputBase';\nimport { __InputStylesNames } from '../Input';\n\nexport interface TextInputProps extends InputBaseProps, ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n  props: TextInputProps;\n  ref: HTMLInputElement;\n  stylesNames: __InputStylesNames;\n}>;\n\nconst defaultProps: Partial<TextInputProps> = {};\n\nexport const TextInput = factory<TextInputFactory>((props, ref) => {\n  const _props = useProps('TextInput', defaultProps, props);\n\n  return <InputBase component=\"input\" ref={ref} {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.displayName = '@mantine/core/TextInput';\n"],"names":[],"mappings":";;;;;AAaA,MAAM,YAAY,GAA4B,EAAE,CAAC;MAEpC,SAAS,GAAG,OAAO,CAAmB,CAAC,KAAK,EAAE,GAAG;IAC5D,MAAM,MAAM,GAAG,QAAQ,CAAC,WAAW,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;IAE1D,OAAO,oBAAC,SAAS,kBAAC,SAAS,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,IAAM,MAAM,IAAE,gBAAgB,EAAC,WAAW,IAAG,CAAC;AAC5F,CAAC,EAAE;AAEH,SAAS,CAAC,WAAW,GAAG,yBAAyB;;;;"}

package/esm/components/Title/Title.js

@@ -0,0 +1,47 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { getTitleSize } from './get-title-size.js';
+import classes from './Title.module.css.js';
+import { factory } from '../../core/factory/factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.js';
+import { Box } from '../../core/Box/Box.js';
+import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+
+const defaultProps = {
+    order: 1,
+};
+const varsResolver = createVarsResolver((_, { order, size }) => {
+    const sizeVariables = getTitleSize(order, size);
+    return {
+        root: {
+            '--title-fw': sizeVariables.fontWeight,
+            '--title-lh': sizeVariables.lineHeight,
+            '--title-fz': sizeVariables.fontSize,
+        },
+    };
+});
+const Title = factory((_props, ref) => {
+    const props = useProps('Title', defaultProps, _props);
+    const { classNames, className, style, styles, unstyled, order, vars, size, variant } = props, others = __rest(props, ["classNames", "className", "style", "styles", "unstyled", "order", "vars", "size", "variant"]);
+    const getStyles = useStyles({
+        name: 'Title',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        vars,
+        varsResolver,
+    });
+    if (![1, 2, 3, 4, 5, 6].includes(order)) {
+        return null;
+    }
+    return (React.createElement(Box, Object.assign({}, getStyles('root'), { component: `h${order}`, variant: variant, ref: ref, mod: { order }, size: size }, others)));
+});
+Title.displayName = '@mantine/core/Title';
+
+export { Title };
+//# sourceMappingURL=Title.js.map

package/esm/components/Title/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  StylesApiProps,\n  factory,\n  ElementProps,\n  useProps,\n  useStyles,\n  createVarsResolver,\n  Factory,\n  Box,\n  BoxProps,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\nexport type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'];\n\nexport type TitleStylesNames = 'root';\nexport type TitleVariant = string;\nexport type TitleCssVariables = {\n  root: '--title-fw' | '--title-lh' | '--title-fz';\n};\n\nexport interface TitleProps extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1'> {\n  /** Determines which tag will be used (h1-h6), controls `font-size` style if `size` prop is not set, `1` by default */\n  order?: TitleOrder;\n\n  /** Changes title size, if not set, then size is controlled by `order` prop */\n  size?: TitleSize;\n}\n\nexport type TitleFactory = Factory<{\n  props: TitleProps;\n  ref: HTMLHeadingElement;\n  stylesNames: TitleStylesNames;\n  vars: TitleCssVariables;\n  variant: TitleVariant;\n}>;\n\nconst defaultProps: Partial<TitleProps> = {\n  order: 1,\n};\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size }) => {\n  const sizeVariables = getTitleSize(order!, size);\n  return {\n    root: {\n      '--title-fw': sizeVariables.fontWeight,\n      '--title-lh': sizeVariables.lineHeight,\n      '--title-fz': sizeVariables.fontSize,\n    },\n  };\n});\n\nexport const Title = factory<TitleFactory>((_props, ref) => {\n  const props = useProps('Title', defaultProps, _props);\n  const { classNames, className, style, styles, unstyled, order, vars, size, variant, ...others } =\n    props;\n\n  const getStyles = useStyles<TitleFactory>({\n    name: 'Title',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n  });\n\n  if (![1, 2, 3, 4, 5, 6].includes(order!)) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      component={`h${order!}`}\n      variant={variant}\n      ref={ref}\n      mod={{ order }}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nTitle.displayName = '@mantine/core/Title';\n"],"names":[],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAY,GAAwB;IACxC,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,MAAM,YAAY,GAAG,kBAAkB,CAAe,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;IACvE,MAAM,aAAa,GAAG,YAAY,CAAC,KAAM,EAAE,IAAI,CAAC,CAAC;IACjD,OAAO;QACL,IAAI,EAAE;YACJ,YAAY,EAAE,aAAa,CAAC,UAAU;YACtC,YAAY,EAAE,aAAa,CAAC,UAAU;YACtC,YAAY,EAAE,aAAa,CAAC,QAAQ;SACrC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;MAEU,KAAK,GAAG,OAAO,CAAe,CAAC,MAAM,EAAE,GAAG;IACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;IACtD,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,KAChF,KAAK,EADgF,MAAM,UAC3F,KAAK,EADD,8FAAyF,CACxF,CAAC;IAER,MAAM,SAAS,GAAG,SAAS,CAAe;QACxC,IAAI,EAAE,OAAO;QACb,KAAK;QACL,OAAO;QACP,SAAS;QACT,KAAK;QACL,UAAU;QACV,MAAM;QACN,QAAQ;QACR,IAAI;QACJ,YAAY;KACb,CAAC,CAAC;IAEH,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAM,CAAC,EAAE;QACxC,OAAO,IAAI,CAAC;KACb;IAED,QACE,oBAAC,GAAG,oBACE,SAAS,CAAC,MAAM,CAAC,IACrB,SAAS,EAAE,IAAI,KAAM,EAAE,EACvB,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,EAAE,KAAK,EAAE,EACd,IAAI,EAAE,IAAI,IACN,MAAM,EACV,EACF;AACJ,CAAC,EAAE;AAEH,KAAK,CAAC,WAAW,GAAG,qBAAqB;;;;"}

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

@@ -0,0 +1,4 @@
+var classes = {"root":"mantine-ORyC6kG"};
+
+export default classes;
+//# sourceMappingURL=Title.module.css.js.map

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

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

package/esm/components/Title/get-title-size.js

@@ -0,0 +1,21 @@
+import { rem } from '../../core/utils/units-converters/rem.js';
+
+const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+function getTitleSize(order, size) {
+    const titleSize = size !== undefined ? size : `h${order}`;
+    if (headings.includes(titleSize)) {
+        return {
+            fontSize: `var(--mantine-${titleSize}-font-size)`,
+            fontWeight: `var(--mantine-${titleSize}-font-weight)`,
+            lineHeight: `var(--mantine-${titleSize}-line-height)`,
+        };
+    }
+    return {
+        fontSize: rem(titleSize),
+        fontWeight: `var(--mantine-h${order}-font-weight)`,
+        lineHeight: `var(--mantine-h${order}-line-height)`,
+    };
+}
+
+export { getTitleSize };
+//# sourceMappingURL=get-title-size.js.map

package/esm/components/Title/get-title-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-title-size.js","sources":["../../../src/components/Title/get-title-size.ts"],"sourcesContent":["import { rem } from '../../core';\nimport type { TitleSize, TitleOrder } from './Title';\n\nconst headings: unknown[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\nexport interface GetTitleSizeResult {\n  fontSize: string;\n  fontWeight: string;\n  lineHeight: string;\n}\n\nexport function getTitleSize(order: TitleOrder, size: TitleSize | undefined): GetTitleSizeResult {\n  const titleSize = size !== undefined ? size : `h${order}`;\n\n  if (headings.includes(titleSize)) {\n    return {\n      fontSize: `var(--mantine-${titleSize}-font-size)`,\n      fontWeight: `var(--mantine-${titleSize}-font-weight)`,\n      lineHeight: `var(--mantine-${titleSize}-line-height)`,\n    };\n  }\n\n  return {\n    fontSize: rem(titleSize),\n    fontWeight: `var(--mantine-h${order}-font-weight)`,\n    lineHeight: `var(--mantine-h${order}-line-height)`,\n  };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,QAAQ,GAAc,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;SAQjD,YAAY,CAAC,KAAiB,EAAE,IAA2B;IACzE,MAAM,SAAS,GAAG,IAAI,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,KAAK,EAAE,CAAC;IAE1D,IAAI,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;QAChC,OAAO;YACL,QAAQ,EAAE,iBAAiB,SAAS,aAAa;YACjD,UAAU,EAAE,iBAAiB,SAAS,eAAe;YACrD,UAAU,EAAE,iBAAiB,SAAS,eAAe;SACtD,CAAC;KACH;IAED,OAAO;QACL,QAAQ,EAAE,GAAG,CAAC,SAAS,CAAC;QACxB,UAAU,EAAE,kBAAkB,KAAK,eAAe;QAClD,UAAU,EAAE,kBAAkB,KAAK,eAAe;KACnD,CAAC;AACJ;;;;"}

package/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1,103 @@
+import { __rest } from 'tslib';
+import React, { useRef, cloneElement } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import cx from 'clsx';
+import { TooltipFloating } from './TooltipFloating/TooltipFloating.js';
+import { TooltipGroup } from './TooltipGroup/TooltipGroup.js';
+import { useTooltip } from './use-tooltip.js';
+import classes from './Tooltip.module.css.js';
+import { getFloatingPosition } from '../Floating/get-floating-position/get-floating-position.js';
+import { getTransitionProps } from '../Transition/get-transition-props/get-transition-props.js';
+import { OptionalPortal } from '../Portal/OptionalPortal.js';
+import { Transition } from '../Transition/Transition.js';
+import { FloatingArrow } from '../Floating/FloatingArrow/FloatingArrow.js';
+import { factory } from '../../core/factory/factory.js';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.js';
+import { useDirection } from '../../core/DirectionProvider/DirectionProvider.js';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.js';
+import { isElement } from '../../core/utils/is-element/is-element.js';
+import { Box } from '../../core/Box/Box.js';
+import { getDefaultZIndex } from '../../core/utils/get-default-z-index/get-default-z-index.js';
+import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+import { getRadius } from '../../core/utils/get-size/get-size.js';
+import { getThemeColor } from '../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.js';
+
+const defaultProps = {
+    position: 'top',
+    refProp: 'ref',
+    withinPortal: true,
+    inline: false,
+    arrowSize: 4,
+    arrowOffset: 5,
+    arrowRadius: 0,
+    arrowPosition: 'side',
+    offset: 5,
+    transitionProps: { duration: 100, transition: 'fade' },
+    events: { hover: true, focus: false, touch: false },
+    zIndex: getDefaultZIndex('popover'),
+    positionDependencies: [],
+};
+const varsResolver = createVarsResolver((theme, { radius, color }) => ({
+    tooltip: {
+        '--tooltip-radius': getRadius(radius),
+        '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,
+    },
+}));
+const Tooltip = factory((_props, ref) => {
+    const props = useProps('Tooltip', defaultProps, _props);
+    const _a = useProps('Tooltip', defaultProps, props), { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, zIndex, disabled, positionDependencies, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps } = _a, others = __rest(_a, ["children", "position", "refProp", "label", "openDelay", "closeDelay", "onPositionChange", "opened", "withinPortal", "radius", "color", "classNames", "styles", "unstyled", "style", "className", "withArrow", "arrowSize", "arrowOffset", "arrowRadius", "arrowPosition", "offset", "transitionProps", "multiline", "events", "zIndex", "disabled", "positionDependencies", "onClick", "onMouseEnter", "onMouseLeave", "inline", "variant", "keepMounted", "vars", "portalProps"]);
+    const { dir } = useDirection();
+    const arrowRef = useRef(null);
+    const tooltip = useTooltip({
+        position: getFloatingPosition(dir, position),
+        closeDelay,
+        openDelay,
+        onPositionChange,
+        opened,
+        events,
+        arrowRef,
+        arrowOffset,
+        offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
+        positionDependencies: [...positionDependencies, children],
+        inline,
+    });
+    const getStyles = useStyles({
+        name: 'Tooltip',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        rootSelector: 'tooltip',
+        vars,
+        varsResolver,
+    });
+    if (!isElement(children)) {
+        throw new Error('[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported');
+    }
+    const targetRef = useMergedRef(tooltip.reference, children.ref, ref);
+    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OptionalPortal, Object.assign({}, portalProps, { withinPortal: withinPortal }),
+            React.createElement(Transition, Object.assign({}, transition, { keepMounted: keepMounted, mounted: !disabled && !!tooltip.opened, duration: tooltip.isGroupPhase ? 10 : transition.duration }), (transitionStyles) => {
+                var _a, _b;
+                return (React.createElement(Box, Object.assign({}, others, { variant: variant, mod: { multiline } }, tooltip.getFloatingProps({
+                    ref: tooltip.floating,
+                    className: getStyles('tooltip').className,
+                    style: Object.assign(Object.assign(Object.assign({}, getStyles('tooltip').style), transitionStyles), { zIndex, top: (_a = tooltip.y) !== null && _a !== void 0 ? _a : 0, left: (_b = tooltip.x) !== null && _b !== void 0 ? _b : 0 }),
+                })),
+                    label,
+                    React.createElement(FloatingArrow, Object.assign({ ref: arrowRef, arrowX: tooltip.arrowX, arrowY: tooltip.arrowY, visible: withArrow, position: tooltip.placement, arrowSize: arrowSize, arrowOffset: arrowOffset, arrowRadius: arrowRadius, arrowPosition: arrowPosition }, getStyles('arrow')))));
+            })),
+        cloneElement(children, tooltip.getReferenceProps(Object.assign({ onClick,
+            onMouseEnter,
+            onMouseLeave, onMouseMove: props.onMouseMove, onPointerDown: props.onPointerDown, onPointerEnter: props.onPointerEnter, [refProp]: targetRef, className: cx(className, children.props.className) }, children.props)))));
+});
+Tooltip.displayName = '@mantine/core/Tooltip';
+Tooltip.Floating = TooltipFloating;
+Tooltip.Group = TooltipGroup;
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/esm/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { cloneElement, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport cx from 'clsx';\nimport {\n  Box,\n  factory,\n  getDefaultZIndex,\n  isElement,\n  useProps,\n  useDirection,\n  useStyles,\n  getThemeColor,\n  getRadius,\n  createVarsResolver,\n  Factory,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  getFloatingPosition,\n} from '../Floating';\nimport { Transition, TransitionOverride, getTransitionProps } from '../Transition';\nimport { OptionalPortal } from '../Portal';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating } from './TooltipFloating/TooltipFloating';\nimport { TooltipGroup } from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\n\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?(position: FloatingPosition): void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms, `0` by default */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Space between target element and tooltip in px, `5` by default */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Determines whether the tooltip should have an arrow, `false` by default */\n  withArrow?: boolean;\n\n  /** Arrow size in px, `4` by default */\n  arrowSize?: number;\n\n  /** Arrow offset in px, `5` by default */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px, `0` by default */\n  arrowRadius?: number;\n\n  /** Arrow position relative to the tooltip, `side` by default */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type, `{ duration: 100, transition: 'fade' }` by default */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip, `{ hover: true, focus: false, touch: false }` by default */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** `useEffect` dependencies to force update tooltip position */\n  positionDependencies?: any[];\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */\n  keepMounted?: boolean;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps: Partial<TooltipProps> = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  inline: false,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  positionDependencies: [],\n};\n\nconst varsResolver = createVarsResolver<TooltipFactory>((theme, { radius, color }) => ({\n  tooltip: {\n    '--tooltip-radius': getRadius(radius),\n    '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const Tooltip = factory<TooltipFactory>((_props, ref) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    zIndex,\n    disabled,\n    positionDependencies,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    ...others\n  } = useProps('Tooltip', defaultProps, props);\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position!),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    events,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset! + (withArrow ? arrowSize! / 2 : 0) : offset!,\n    positionDependencies: [...positionDependencies!, children],\n    inline,\n  });\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  if (!isElement(children)) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const targetRef = useMergedRef(tooltip.reference, (children as any).ref, ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              variant={variant}\n              mod={{ multiline }}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  zIndex,\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                },\n              })}\n            >\n              {label}\n\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX!}\n                arrowY={tooltip.arrowY!}\n                visible={withArrow!}\n                position={tooltip.placement!}\n                arrowSize={arrowSize!}\n                arrowOffset={arrowOffset!}\n                arrowRadius={arrowRadius!}\n                arrowPosition={arrowPosition!}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        children,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          [refProp!]: targetRef,\n          className: cx(className, children.props.className),\n          ...children.props,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var classes = {"tooltip":"mantine-XNobA9l","arrow":"mantine-NpDXIwZ"};
+
+export default classes;
+//# sourceMappingURL=Tooltip.module.css.js.map

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

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

package/esm/components/Tooltip/TooltipFloating/TooltipFloating.js

@@ -0,0 +1,80 @@
+import { __rest } from 'tslib';
+import React, { cloneElement } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import classes from '../Tooltip.module.css.js';
+import { useFloatingTooltip } from './use-floating-tooltip.js';
+import { OptionalPortal } from '../../Portal/OptionalPortal.js';
+import { factory } from '../../../core/factory/factory.js';
+import { useProps } from '../../../core/MantineProvider/use-props/use-props.js';
+import { useMantineTheme } from '../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.js';
+import { useStyles } from '../../../core/styles-api/use-styles/use-styles.js';
+import { isElement } from '../../../core/utils/is-element/is-element.js';
+import { Box } from '../../../core/Box/Box.js';
+import { getStyleObject } from '../../../core/Box/get-style-object/get-style-object.js';
+import { getDefaultZIndex } from '../../../core/utils/get-default-z-index/get-default-z-index.js';
+import { createVarsResolver } from '../../../core/styles-api/create-vars-resolver/create-vars-resolver.js';
+import { getRadius } from '../../../core/utils/get-size/get-size.js';
+import { getThemeColor } from '../../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.js';
+
+const defaultProps = {
+    refProp: 'ref',
+    withinPortal: true,
+    offset: 10,
+    position: 'right',
+    zIndex: getDefaultZIndex('popover'),
+};
+const varsResolver = createVarsResolver((theme, { radius, color }) => ({
+    tooltip: {
+        '--tooltip-radius': getRadius(radius),
+        '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,
+    },
+}));
+const TooltipFloating = factory((_props, ref) => {
+    var _a, _b;
+    const props = useProps('TooltipFloating', defaultProps, _props);
+    const { children, refProp, withinPortal, style, className, classNames, styles, unstyled, radius, color, label, offset, position, multiline, zIndex, disabled, variant, vars, portalProps } = props, others = __rest(props, ["children", "refProp", "withinPortal", "style", "className", "classNames", "styles", "unstyled", "radius", "color", "label", "offset", "position", "multiline", "zIndex", "disabled", "variant", "vars", "portalProps"]);
+    const theme = useMantineTheme();
+    const getStyles = useStyles({
+        name: 'TooltipFloating',
+        props,
+        classes,
+        className,
+        style,
+        classNames,
+        styles,
+        unstyled,
+        rootSelector: 'tooltip',
+        vars,
+        varsResolver,
+    });
+    const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({
+        offset: offset,
+        position: position,
+    });
+    if (!isElement(children)) {
+        throw new Error('[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported');
+    }
+    const targetRef = useMergedRef(boundaryRef, children.ref, ref);
+    const onMouseEnter = (event) => {
+        var _a, _b;
+        (_b = (_a = children.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        handleMouseMove(event);
+        setOpened(true);
+    };
+    const onMouseLeave = (event) => {
+        var _a, _b;
+        (_b = (_a = children.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+        setOpened(false);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(OptionalPortal, Object.assign({}, portalProps, { withinPortal: withinPortal }),
+            React.createElement(Box, Object.assign({}, others, getStyles('tooltip', {
+                style: Object.assign(Object.assign({}, getStyleObject(style, theme)), { zIndex, display: !disabled && opened ? 'block' : 'none', top: (_a = (y && Math.round(y))) !== null && _a !== void 0 ? _a : '', left: (_b = (x && Math.round(x))) !== null && _b !== void 0 ? _b : '' }),
+            }), { variant: variant, ref: floating }), label)),
+        cloneElement(children, Object.assign(Object.assign({}, children.props), { [refProp]: targetRef, onMouseEnter,
+            onMouseLeave }))));
+});
+TooltipFloating.displayName = '@mantine/core/TooltipFloating';
+
+export { TooltipFloating };
+//# sourceMappingURL=TooltipFloating.js.map

package/esm/components/Tooltip/TooltipFloating/TooltipFloating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipFloating.js","sources":["../../../../src/components/Tooltip/TooltipFloating/TooltipFloating.tsx"],"sourcesContent":["import React, { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  factory,\n  getDefaultZIndex,\n  isElement,\n  useProps,\n  useStyles,\n  getStyleObject,\n  useMantineTheme,\n  Factory,\n  createVarsResolver,\n  getRadius,\n  getThemeColor,\n} from '../../../core';\nimport { OptionalPortal } from '../../Portal';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../Tooltip.types';\nimport classes from '../Tooltip.module.css';\nimport { useFloatingTooltip } from './use-floating-tooltip';\n\nexport interface TooltipFloatingProps extends TooltipBaseProps {\n  /** Offset from mouse in px, `10` by default */\n  offset?: number;\n}\n\nexport type TooltipFloatingFactory = Factory<{\n  props: TooltipFloatingProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n}>;\n\nconst defaultProps: Partial<TooltipFloatingProps> = {\n  refProp: 'ref',\n  withinPortal: true,\n  offset: 10,\n  position: 'right',\n  zIndex: getDefaultZIndex('popover'),\n};\n\nconst varsResolver = createVarsResolver<TooltipFloatingFactory>((theme, { radius, color }) => ({\n  tooltip: {\n    '--tooltip-radius': getRadius(radius),\n    '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const TooltipFloating = factory<TooltipFloatingFactory>((_props, ref) => {\n  const props = useProps('TooltipFloating', defaultProps, _props);\n  const {\n    children,\n    refProp,\n    withinPortal,\n    style,\n    className,\n    classNames,\n    styles,\n    unstyled,\n    radius,\n    color,\n    label,\n    offset,\n    position,\n    multiline,\n    zIndex,\n    disabled,\n    variant,\n    vars,\n    portalProps,\n    ...others\n  } = props;\n\n  const theme = useMantineTheme();\n  const getStyles = useStyles<TooltipFloatingFactory>({\n    name: 'TooltipFloating',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({\n    offset: offset!,\n    position: position!,\n  });\n\n  if (!isElement(children)) {\n    throw new Error(\n      '[@mantine/core] Tooltip.Floating component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const targetRef = useMergedRef(boundaryRef, (children as any).ref, ref);\n\n  const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {\n    children.props.onMouseEnter?.(event);\n    handleMouseMove(event);\n    setOpened(true);\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<unknown, MouseEvent>) => {\n    children.props.onMouseLeave?.(event);\n    setOpened(false);\n  };\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Box\n          {...others}\n          {...getStyles('tooltip', {\n            style: {\n              ...getStyleObject(style, theme),\n              zIndex,\n              display: !disabled && opened ? 'block' : 'none',\n              top: (y && Math.round(y)) ?? '',\n              left: (x && Math.round(x)) ?? '',\n            },\n          })}\n          variant={variant}\n          ref={floating}\n        >\n          {label}\n        </Box>\n      </OptionalPortal>\n\n      {cloneElement(children, {\n        ...children.props,\n        [refProp!]: targetRef,\n        onMouseEnter,\n        onMouseLeave,\n      })}\n    </>\n  );\n});\n\nTooltipFloating.displayName = '@mantine/core/TooltipFloating';\n"],"names":[],"mappings":"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"}

package/esm/components/Tooltip/TooltipFloating/use-floating-tooltip.js

@@ -0,0 +1,64 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { useFloating, shift, getOverflowAncestors } from '@floating-ui/react';
+
+function useFloatingTooltip({ offset, position, }) {
+    const [opened, setOpened] = useState(false);
+    const boundaryRef = useRef();
+    const { x, y, reference, floating, refs, update, placement } = useFloating({
+        placement: position,
+        middleware: [
+            shift({
+                crossAxis: true,
+                padding: 5,
+                rootBoundary: 'document',
+            }),
+        ],
+    });
+    const horizontalOffset = placement.includes('right')
+        ? offset
+        : position.includes('left')
+            ? offset * -1
+            : 0;
+    const verticalOffset = placement.includes('bottom')
+        ? offset
+        : position.includes('top')
+            ? offset * -1
+            : 0;
+    const handleMouseMove = useCallback(({ clientX, clientY }) => {
+        reference({
+            getBoundingClientRect() {
+                return {
+                    width: 0,
+                    height: 0,
+                    x: clientX,
+                    y: clientY,
+                    left: clientX + horizontalOffset,
+                    top: clientY + verticalOffset,
+                    right: clientX,
+                    bottom: clientY,
+                };
+            },
+        });
+    }, [reference]);
+    useEffect(() => {
+        if (refs.floating.current) {
+            const boundary = boundaryRef.current;
+            boundary.addEventListener('mousemove', handleMouseMove);
+            const parents = getOverflowAncestors(refs.floating.current);
+            parents.forEach((parent) => {
+                parent.addEventListener('scroll', update);
+            });
+            return () => {
+                boundary.removeEventListener('mousemove', handleMouseMove);
+                parents.forEach((parent) => {
+                    parent.removeEventListener('scroll', update);
+                });
+            };
+        }
+        return undefined;
+    }, [reference, refs.floating.current, update, handleMouseMove, opened]);
+    return { handleMouseMove, x, y, opened, setOpened, boundaryRef, floating };
+}
+
+export { useFloatingTooltip };
+//# sourceMappingURL=use-floating-tooltip.js.map

package/esm/components/Tooltip/TooltipFloating/use-floating-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-floating-tooltip.js","sources":["../../../../src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from 'react';\nimport { useFloating, shift, getOverflowAncestors } from '@floating-ui/react';\nimport { FloatingPosition } from '../../Floating';\n\ninterface UseFloatingTooltip {\n  offset: number;\n  position: FloatingPosition;\n}\n\nexport function useFloatingTooltip<T extends HTMLElement = any>({\n  offset,\n  position,\n}: UseFloatingTooltip) {\n  const [opened, setOpened] = useState(false);\n  const boundaryRef = useRef<T>();\n  const { x, y, reference, floating, refs, update, placement } = useFloating({\n    placement: position,\n    middleware: [\n      shift({\n        crossAxis: true,\n        padding: 5,\n        rootBoundary: 'document',\n      }),\n    ],\n  });\n\n  const horizontalOffset = placement.includes('right')\n    ? offset\n    : position.includes('left')\n    ? offset * -1\n    : 0;\n\n  const verticalOffset = placement.includes('bottom')\n    ? offset\n    : position.includes('top')\n    ? offset * -1\n    : 0;\n\n  const handleMouseMove = useCallback(\n    ({ clientX, clientY }: MouseEvent | React.MouseEvent<T, MouseEvent>) => {\n      reference({\n        getBoundingClientRect() {\n          return {\n            width: 0,\n            height: 0,\n            x: clientX,\n            y: clientY,\n            left: clientX + horizontalOffset,\n            top: clientY + verticalOffset,\n            right: clientX,\n            bottom: clientY,\n          };\n        },\n      });\n    },\n    [reference]\n  );\n\n  useEffect(() => {\n    if (refs.floating.current) {\n      const boundary = boundaryRef.current!;\n      boundary.addEventListener('mousemove', handleMouseMove);\n\n      const parents = getOverflowAncestors(refs.floating.current);\n      parents.forEach((parent) => {\n        parent.addEventListener('scroll', update);\n      });\n\n      return () => {\n        boundary.removeEventListener('mousemove', handleMouseMove);\n        parents.forEach((parent) => {\n          parent.removeEventListener('scroll', update);\n        });\n      };\n    }\n\n    return undefined;\n  }, [reference, refs.floating.current, update, handleMouseMove, opened]);\n\n  return { handleMouseMove, x, y, opened, setOpened, boundaryRef, floating };\n}\n"],"names":[],"mappings":";;;SASgB,kBAAkB,CAA8B,EAC9D,MAAM,EACN,QAAQ,GACW;IACnB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,MAAM,EAAK,CAAC;IAChC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QACzE,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE;YACV,KAAK,CAAC;gBACJ,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,CAAC;gBACV,YAAY,EAAE,UAAU;aACzB,CAAC;SACH;KACF,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC;UAChD,MAAM;UACN,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;cACzB,MAAM,GAAG,CAAC,CAAC;cACX,CAAC,CAAC;IAEN,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;UAC/C,MAAM;UACN,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC;cACxB,MAAM,GAAG,CAAC,CAAC;cACX,CAAC,CAAC;IAEN,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAgD;QACjE,SAAS,CAAC;YACR,qBAAqB;gBACnB,OAAO;oBACL,KAAK,EAAE,CAAC;oBACR,MAAM,EAAE,CAAC;oBACT,CAAC,EAAE,OAAO;oBACV,CAAC,EAAE,OAAO;oBACV,IAAI,EAAE,OAAO,GAAG,gBAAgB;oBAChC,GAAG,EAAE,OAAO,GAAG,cAAc;oBAC7B,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,OAAO;iBAChB,CAAC;aACH;SACF,CAAC,CAAC;KACJ,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;YACzB,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAQ,CAAC;YACtC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAExD,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC5D,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM;gBACrB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;aAC3C,CAAC,CAAC;YAEH,OAAO;gBACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;gBAC3D,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM;oBACrB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;iBAC9C,CAAC,CAAC;aACJ,CAAC;SACH;QAED,OAAO,SAAS,CAAC;KAClB,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IAExE,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAC7E;;;;"}