@mantine/core 9.6.3 → 9.7.0

package/esm/components/Toolbar/Toolbar.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.context.mjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { ToolbarFactory } from './Toolbar';\n\nexport interface ToolbarContextValue {\n  getStyles: GetStylesApi<ToolbarFactory>;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport const [ToolbarProvider, useToolbarContext] = createSafeContext<ToolbarContextValue>(\n  'Toolbar component was not found in tree'\n);\n"],"mappings":";;;AAQA,MAAa,CAAC,iBAAiB,qBAAqB,kBAClD,yCACF"}

package/esm/components/Toolbar/Toolbar.mjs

@@ -0,0 +1,107 @@
+"use client";
+import { getRadius, getSize } from "../../core/utils/get-size/get-size.mjs";
+import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
+import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
+import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
+import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
+import { ToolbarProvider } from "./Toolbar.context.mjs";
+import Toolbar_module_default from "./Toolbar.module.mjs";
+import { ToolbarDivider } from "./ToolbarDivider/ToolbarDivider.mjs";
+import { ToolbarGroup } from "./ToolbarGroup/ToolbarGroup.mjs";
+import { ToolbarToggle } from "./ToolbarToggle/ToolbarToggle.mjs";
+import { ToolbarToggleGroup } from "./ToolbarToggleGroup/ToolbarToggleGroup.mjs";
+import { ToolbarToggleItem } from "./ToolbarToggleItem/ToolbarToggleItem.mjs";
+import { useToolbarNavigation } from "./use-toolbar-navigation.mjs";
+import { useMergedRef } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.tsx
+const defaultProps = {
+	orientation: "horizontal",
+	loop: true,
+	withBorder: true,
+	variant: "filled"
+};
+const varsResolver = createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return {
+		root: {
+			"--toolbar-toggle-size": size !== void 0 ? getSize(size, "toolbar-toggle-size") : void 0,
+			"--toolbar-padding": size !== void 0 ? getSize(size, "toolbar-padding") : void 0,
+			"--toolbar-gap": size !== void 0 ? getSize(size, "toolbar-gap") : void 0,
+			"--toolbar-radius": radius !== void 0 ? getRadius(radius) : void 0
+		},
+		toggle: {
+			"--toolbar-toggle-active-bg": activeColors.background,
+			"--toolbar-toggle-active-hover": activeColors.hover,
+			"--toolbar-toggle-active-color": activeColors.color
+		}
+	};
+});
+const Toolbar = factory((_props) => {
+	const props = useProps("Toolbar", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, orientation, loop, size, radius, withBorder, color, autoContrast, variant, children, attributes, onKeyDown, onFocus, ref, ...others } = props;
+	const { dir } = useDirection();
+	const getStyles = useStyles({
+		name: "Toolbar",
+		classes: Toolbar_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	const { toolbarRef, handleKeyDown, handleItemFocus } = useToolbarNavigation({
+		orientation,
+		loop,
+		dir
+	});
+	const mergedRef = useMergedRef(toolbarRef, ref);
+	return /* @__PURE__ */ jsx(ToolbarProvider, {
+		value: {
+			getStyles,
+			orientation
+		},
+		children: /* @__PURE__ */ jsx(Box, {
+			ref: mergedRef,
+			role: "toolbar",
+			"aria-orientation": orientation,
+			...getStyles("root"),
+			"data-orientation": orientation,
+			"data-with-border": withBorder || void 0,
+			variant,
+			size,
+			...others,
+			onKeyDown: (event) => {
+				handleKeyDown(event);
+				onKeyDown?.(event);
+			},
+			onFocus: (event) => {
+				handleItemFocus(event);
+				onFocus?.(event);
+			},
+			children
+		})
+	});
+});
+Toolbar.classes = Toolbar_module_default;
+Toolbar.displayName = "@mantine/core/Toolbar";
+Toolbar.Group = ToolbarGroup;
+Toolbar.Toggle = ToolbarToggle;
+Toolbar.ToggleGroup = ToolbarToggleGroup;
+Toolbar.ToggleItem = ToolbarToggleItem;
+Toolbar.Divider = ToolbarDivider;
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=Toolbar.mjs.map

package/esm/components/Toolbar/Toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","names":["classes"],"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { ToggleVariant } from '../Toggle';\nimport { ToolbarProvider } from './Toolbar.context';\nimport { ToolbarDivider, ToolbarDividerStylesNames } from './ToolbarDivider/ToolbarDivider';\nimport { ToolbarGroup, ToolbarGroupStylesNames } from './ToolbarGroup/ToolbarGroup';\nimport { ToolbarToggle, ToolbarToggleStylesNames } from './ToolbarToggle/ToolbarToggle';\nimport { ToolbarToggleGroup } from './ToolbarToggleGroup/ToolbarToggleGroup';\nimport {\n  ToolbarToggleItem,\n  ToolbarToggleItemStylesNames,\n} from './ToolbarToggleItem/ToolbarToggleItem';\nimport { useToolbarNavigation } from './use-toolbar-navigation';\nimport classes from './Toolbar.module.css';\n\nexport type ToolbarStylesNames =\n  | 'root'\n  | ToolbarGroupStylesNames\n  | ToolbarToggleStylesNames\n  | ToolbarToggleItemStylesNames\n  | ToolbarDividerStylesNames;\n\nexport type ToolbarCssVariables = {\n  root: '--toolbar-toggle-size' | '--toolbar-padding' | '--toolbar-gap' | '--toolbar-radius';\n  toggle:\n    | '--toolbar-toggle-active-bg'\n    | '--toolbar-toggle-active-hover'\n    | '--toolbar-toggle-active-color';\n};\n\nexport interface ToolbarProps\n  extends BoxProps, StylesApiProps<ToolbarFactory>, ElementProps<'div'> {\n  /** Toolbar orientation, `'horizontal'` by default */\n  orientation?: 'horizontal' | 'vertical';\n\n  /** Whether arrow key navigation wraps from last to first item, `true` by default */\n  loop?: boolean;\n\n  /** Controls size of toggle components, padding, and gap, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, propagated to all children, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** Determines whether the toolbar has a border, `true` by default */\n  withBorder?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, controls color of child toggle components */\n  color?: MantineColor;\n\n  /** Determines whether icon color with filled variant should be changed based on the given `color` prop */\n  autoContrast?: boolean;\n\n  /** Toolbar content */\n  children: React.ReactNode;\n}\n\nexport type ToolbarFactory = Factory<{\n  props: ToolbarProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarStylesNames;\n  vars: ToolbarCssVariables;\n  variant: ToggleVariant;\n  staticComponents: {\n    Group: typeof ToolbarGroup;\n    Toggle: typeof ToolbarToggle;\n    ToggleGroup: typeof ToolbarToggleGroup;\n    ToggleItem: typeof ToolbarToggleItem;\n    Divider: typeof ToolbarDivider;\n  };\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n  loop: true,\n  withBorder: true,\n  variant: 'filled',\n} satisfies Partial<ToolbarProps>;\n\nconst varsResolver = createVarsResolver<ToolbarFactory>(\n  (theme, { size, radius, color, variant, autoContrast }) => {\n    const activeColors = theme.variantColorResolver({\n      color: color || theme.primaryColor,\n      theme,\n      variant: variant || 'filled',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--toolbar-toggle-size':\n          size !== undefined ? getSize(size, 'toolbar-toggle-size') : undefined,\n        '--toolbar-padding': size !== undefined ? getSize(size, 'toolbar-padding') : undefined,\n        '--toolbar-gap': size !== undefined ? getSize(size, 'toolbar-gap') : undefined,\n        '--toolbar-radius': radius !== undefined ? getRadius(radius) : undefined,\n      },\n      toggle: {\n        '--toolbar-toggle-active-bg': activeColors.background,\n        '--toolbar-toggle-active-hover': activeColors.hover,\n        '--toolbar-toggle-active-color': activeColors.color,\n      },\n    };\n  }\n);\n\nexport const Toolbar = factory<ToolbarFactory>((_props) => {\n  const props = useProps('Toolbar', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    orientation,\n    loop,\n    size,\n    radius,\n    withBorder,\n    color,\n    autoContrast,\n    variant,\n    children,\n    attributes,\n    onKeyDown,\n    onFocus,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n\n  const getStyles = useStyles<ToolbarFactory>({\n    name: 'Toolbar',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { toolbarRef, handleKeyDown, handleItemFocus } = useToolbarNavigation({\n    orientation: orientation!,\n    loop: loop!,\n    dir,\n  });\n\n  const mergedRef = useMergedRef(toolbarRef, ref);\n\n  return (\n    <ToolbarProvider value={{ getStyles, orientation: orientation! }}>\n      <Box\n        ref={mergedRef}\n        role=\"toolbar\"\n        aria-orientation={orientation}\n        {...getStyles('root')}\n        data-orientation={orientation}\n        data-with-border={withBorder || undefined}\n        variant={variant}\n        size={size}\n        {...others}\n        onKeyDown={(event) => {\n          handleKeyDown(event);\n          onKeyDown?.(event);\n        }}\n        onFocus={(event) => {\n          handleItemFocus(event);\n          onFocus?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    </ToolbarProvider>\n  );\n});\n\nToolbar.classes = classes;\nToolbar.displayName = '@mantine/core/Toolbar';\nToolbar.Group = ToolbarGroup;\nToolbar.Toggle = ToolbarToggle;\nToolbar.ToggleGroup = ToolbarToggleGroup;\nToolbar.ToggleItem = ToolbarToggleItem;\nToolbar.Divider = ToolbarDivider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwFA,MAAM,eAAe;CACnB,aAAa;CACb,MAAM;CACN,YAAY;CACZ,SAAS;AACX;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,SAAS,mBAAmB;CACzD,MAAM,eAAe,MAAM,qBAAqB;EAC9C,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO;EACL,MAAM;GACJ,yBACE,SAAS,KAAA,IAAY,QAAQ,MAAM,qBAAqB,IAAI,KAAA;GAC9D,qBAAqB,SAAS,KAAA,IAAY,QAAQ,MAAM,iBAAiB,IAAI,KAAA;GAC7E,iBAAiB,SAAS,KAAA,IAAY,QAAQ,MAAM,aAAa,IAAI,KAAA;GACrE,oBAAoB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;EACjE;EACA,QAAQ;GACN,8BAA8B,aAAa;GAC3C,iCAAiC,aAAa;GAC9C,iCAAiC,aAAa;EAChD;CACF;AACF,CACF;AAEA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,aACA,MACA,MACA,QACA,YACA,OACA,cACA,SACA,UACA,YACA,WACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,eAAe,oBAAoB,qBAAqB;EAC7D;EACP;EACN;CACF,CAAC;CAED,MAAM,YAAY,aAAa,YAAY,GAAG;CAE9C,OACE,oBAAC,iBAAD;EAAiB,OAAO;GAAE;GAAwB;EAAa;EAC7D,UAAA,oBAAC,KAAD;GACE,KAAK;GACL,MAAK;GACL,oBAAkB;GAClB,GAAI,UAAU,MAAM;GACpB,oBAAkB;GAClB,oBAAkB,cAAc,KAAA;GACvB;GACH;GACN,GAAI;GACJ,YAAY,UAAU;IACpB,cAAc,KAAK;IACnB,YAAY,KAAK;GACnB;GACA,UAAU,UAAU;IAClB,gBAAgB,KAAK;IACrB,UAAU,KAAK;GACjB;GAEC;EACE,CAAA;CACU,CAAA;AAErB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc;AACtB,QAAQ,QAAQ;AAChB,QAAQ,SAAS;AACjB,QAAQ,cAAc;AACtB,QAAQ,aAAa;AACrB,QAAQ,UAAU"}

package/esm/components/Toolbar/Toolbar.module.mjs

@@ -0,0 +1,12 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.module.css
+var Toolbar_module_default = {
+	"root": "m_a2d26014",
+	"group": "m_b6dffd8d",
+	"toggle": "m_3b209606",
+	"divider": "m_d1258ea7"
+};
+//#endregion
+export { Toolbar_module_default as default };
+
+//# sourceMappingURL=Toolbar.module.mjs.map

package/esm/components/Toolbar/Toolbar.module.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.module.mjs","names":[],"sources":["../../../src/components/Toolbar/Toolbar.module.css"],"sourcesContent":[".root {\n  --toolbar-toggle-size-xs: 22px;\n  --toolbar-toggle-size-sm: 26px;\n  --toolbar-toggle-size-md: 30px;\n  --toolbar-toggle-size-lg: 36px;\n  --toolbar-toggle-size-xl: 42px;\n\n  --toolbar-padding-xs: 4px;\n  --toolbar-padding-sm: 5px;\n  --toolbar-padding-md: 6px;\n  --toolbar-padding-lg: 8px;\n  --toolbar-padding-xl: 12px;\n\n  --toolbar-gap-xs: calc(var(--mantine-spacing-xs) / 2);\n  --toolbar-gap-sm: var(--mantine-spacing-xs);\n  --toolbar-gap-md: var(--mantine-spacing-sm);\n  --toolbar-gap-lg: var(--mantine-spacing-sm);\n  --toolbar-gap-xl: var(--mantine-spacing-md);\n\n  --toolbar-toggle-size: var(--toolbar-toggle-size-md);\n  --toolbar-padding: var(--toolbar-padding-md);\n  --toolbar-gap: var(--toolbar-gap-md);\n  --_tr: var(--toolbar-radius, var(--mantine-radius-default));\n  --toolbar-toggle-radius: max(calc(var(--_tr) - var(--toolbar-padding)), min(var(--_tr), 2px));\n\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--toolbar-gap);\n  background-color: var(--mantine-color-body);\n  border-radius: var(--toolbar-radius, var(--mantine-radius-default));\n  padding: var(--toolbar-padding);\n\n  &:where([data-with-border]) {\n    border: 1px solid;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-4);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-4);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n    align-items: stretch;\n    width: fit-content;\n  }\n}\n\n.group {\n  display: flex;\n  background-color: var(--mantine-color-body);\n\n  & :where([data-toolbar-toggle]) {\n    &:focus-visible {\n      position: relative;\n      z-index: 1;\n    }\n\n    &:not(:only-child):first-child {\n      border-end-end-radius: 0;\n      border-start-end-radius: 0;\n      border-inline-end-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):last-child {\n      border-end-start-radius: 0;\n      border-start-start-radius: 0;\n      border-inline-start-width: calc(1px / 2);\n    }\n\n    &:not(:only-child):not(:first-child):not(:last-child) {\n      border-radius: 0;\n      border-inline-width: calc(1px / 2);\n    }\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n\n    & :where([data-toolbar-toggle]) {\n      &:not(:only-child):first-child {\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n        border-start-end-radius: var(--toolbar-toggle-radius);\n        border-inline-end-width: 1px;\n        border-bottom-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):last-child {\n        border-start-start-radius: 0;\n        border-start-end-radius: 0;\n        border-end-start-radius: var(--toolbar-toggle-radius);\n        border-inline-start-width: 1px;\n        border-top-width: calc(1px / 2);\n      }\n\n      &:not(:only-child):not(:first-child):not(:last-child) {\n        border-radius: 0;\n        border-inline-width: 1px;\n        border-bottom-width: calc(1px / 2);\n        border-top-width: calc(1px / 2);\n      }\n    }\n  }\n}\n\n.toggle {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--toolbar-toggle-radius);\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toolbar-toggle-size);\n  min-width: var(--toolbar-toggle-size);\n  height: var(--toolbar-toggle-size);\n  padding: calc(var(--toolbar-toggle-size) / 5);\n  border: 1px solid;\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toolbar-toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toolbar-toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toolbar-toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(\n          --toolbar-toggle-active-hover,\n          var(--mantine-primary-color-light-hover)\n        );\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n\n.divider {\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: 1px;\n    align-self: stretch;\n  }\n\n  &:where([data-orientation='vertical']) {\n    height: 1px;\n    align-self: stretch;\n  }\n}\n"],"mappings":""}

package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx
+const defaultProps = {};
+const ToolbarDivider = factory((_props) => {
+	const { classNames, className, style, styles, vars, "aria-orientation": ariaOrientation, ...others } = useProps("ToolbarDivider", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...others,
+		role: "separator",
+		"aria-orientation": ariaOrientation ?? (ctx.orientation === "horizontal" ? "vertical" : "horizontal"),
+		...ctx.getStyles("divider", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation
+	});
+});
+ToolbarDivider.classes = Toolbar_module_default;
+ToolbarDivider.displayName = "@mantine/core/ToolbarDivider";
+//#endregion
+export { ToolbarDivider };
+
+//# sourceMappingURL=ToolbarDivider.mjs.map

package/esm/components/Toolbar/ToolbarDivider/ToolbarDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDivider.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarDivider/ToolbarDivider.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarDividerStylesNames = 'divider';\n\nexport interface ToolbarDividerProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarDividerFactory>, ElementProps<'div'> {}\n\nexport type ToolbarDividerFactory = Factory<{\n  props: ToolbarDividerProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarDividerStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarDividerProps> = {};\n\nexport const ToolbarDivider = factory<ToolbarDividerFactory>((_props) => {\n  const props = useProps('ToolbarDivider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    'aria-orientation': ariaOrientation,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"separator\"\n      aria-orientation={\n        ariaOrientation ?? (ctx.orientation === 'horizontal' ? 'vertical' : 'horizontal')\n      }\n      {...ctx.getStyles('divider', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    />\n  );\n});\n\nToolbarDivider.classes = classes;\nToolbarDivider.displayName = '@mantine/core/ToolbarDivider';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA6C,CAAC;AAEpD,MAAa,iBAAiB,SAAgC,WAAW;CAEvE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,oBAAoB,iBACpB,GAAG,WARS,SAAS,kBAAkB,cAAc,MAS/C;CACR,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,MAAK;EACL,oBACE,oBAAoB,IAAI,gBAAgB,eAAe,aAAa;EAEtE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACrE,oBAAkB,IAAI;CACvB,CAAA;AAEL,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,cAAc"}

package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx
+const defaultProps = {};
+const ToolbarGroup = factory((_props) => {
+	const { classNames, className, style, styles, vars, children, ...others } = useProps("ToolbarGroup", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...others,
+		role: "group",
+		...ctx.getStyles("group", {
+			className,
+			classNames,
+			style,
+			styles
+		}),
+		"data-orientation": ctx.orientation,
+		children
+	});
+});
+ToolbarGroup.classes = Toolbar_module_default;
+ToolbarGroup.displayName = "@mantine/core/ToolbarGroup";
+//#endregion
+export { ToolbarGroup };
+
+//# sourceMappingURL=ToolbarGroup.mjs.map

package/esm/components/Toolbar/ToolbarGroup/ToolbarGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarGroup.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarGroupStylesNames = 'group';\n\nexport interface ToolbarGroupProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarGroupFactory>, ElementProps<'div'> {}\n\nexport type ToolbarGroupFactory = Factory<{\n  props: ToolbarGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarGroupProps> = {};\n\nexport const ToolbarGroup = factory<ToolbarGroupFactory>((_props) => {\n  const props = useProps('ToolbarGroup', defaultProps, _props);\n  const { classNames, className, style, styles, vars, children, ...others } = props;\n  const ctx = useToolbarContext();\n\n  return (\n    <Box\n      {...others}\n      role=\"group\"\n      {...ctx.getStyles('group', { className, classNames, style, styles })}\n      data-orientation={ctx.orientation}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarGroup.classes = classes;\nToolbarGroup.displayName = '@mantine/core/ToolbarGroup';\n"],"mappings":";;;;;;;;AAwBA,MAAM,eAA2C,CAAC;AAElD,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,GAAG,WADnD,SAAS,gBAAgB,cAAc,MAC2B;CAChF,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,oBAAkB,IAAI;EAErB;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { polymorphicFactory } from "../../../core/factory/polymorphic-factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx
+const defaultProps = {};
+const ToolbarToggle = polymorphicFactory((_props) => {
+	const { classNames, className, style, styles, vars, disabled, active, autoWidth, children, component, onClick, ...others } = useProps("ToolbarToggle", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": active,
+		tabIndex: disabled ? -1 : 0,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggle.classes = Toolbar_module_default;
+ToolbarToggle.displayName = "@mantine/core/ToolbarToggle";
+//#endregion
+export { ToolbarToggle };
+
+//# sourceMappingURL=ToolbarToggle.mjs.map

package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggle.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx"],"sourcesContent":["import {\n  Box,\n  BoxComponentProps,\n  CompoundStylesApiProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleStylesNames = 'toggle';\n\nexport interface ToolbarToggleProps\n  extends BoxComponentProps, CompoundStylesApiProps<ToolbarToggleFactory> {\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle is displayed in active state */\n  active?: boolean;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleFactory = PolymorphicFactory<{\n  props: ToolbarToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToolbarToggleStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleProps> = {};\n\nexport const ToolbarToggle = polymorphicFactory<ToolbarToggleFactory>(\n  (_props: ToolbarToggleProps & { component?: any }) => {\n    const props = useProps('ToolbarToggle', defaultProps, _props);\n    const {\n      classNames,\n      className,\n      style,\n      styles,\n      vars,\n      disabled,\n      active,\n      autoWidth,\n      children,\n      component,\n      onClick,\n      ...others\n    } = props as typeof props & {\n      children?: React.ReactNode;\n      component?: any;\n      onClick?: React.MouseEventHandler<HTMLElement>;\n    };\n    const ctx = useToolbarContext();\n\n    return (\n      <Box\n        component={component || 'button'}\n        type={!component || component === 'button' ? 'button' : undefined}\n        {...others}\n        {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n        data-toolbar-toggle\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-auto-width={autoWidth || undefined}\n        disabled={disabled}\n        aria-disabled={disabled || undefined}\n        aria-pressed={active}\n        tabIndex={disabled ? -1 : 0}\n        onClick={(event: React.MouseEvent<HTMLElement>) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nToolbarToggle.classes = classes;\nToolbarToggle.displayName = '@mantine/core/ToolbarToggle';\n"],"mappings":";;;;;;;;AAiCA,MAAM,eAA4C,CAAC;AAEnD,MAAa,gBAAgB,oBAC1B,WAAqD;CAEpD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,QACA,WACA,UACA,WACA,SACA,GAAG,WAbS,SAAS,iBAAiB,cAAc,MAc9C;CAKR,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EAC1B,UAAU,UAAyC;GACjD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CACF;AAEA,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts
+const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] = createSafeContext("Toolbar.ToggleGroup component was not found in tree");
+//#endregion
+export { ToolbarToggleGroupProvider, useToolbarToggleGroupContext };
+
+//# sourceMappingURL=ToolbarToggleGroup.context.mjs.map

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.context.mjs","names":[],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts"],"sourcesContent":["import { createSafeContext } from '../../../core';\n\nexport interface ToolbarToggleGroupContextValue {\n  value: string | string[] | null;\n  onChange: (itemValue: string) => void;\n  type: 'single' | 'multiple';\n  disabled: boolean;\n}\n\nexport const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] =\n  createSafeContext<ToolbarToggleGroupContextValue>(\n    'Toolbar.ToggleGroup component was not found in tree'\n  );\n"],"mappings":";;;AASA,MAAa,CAAC,4BAA4B,gCACxC,kBACE,qDACF"}

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { ToolbarToggleGroupProvider } from "./ToolbarToggleGroup.context.mjs";
+import { useUncontrolled } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx
+const defaultProps = {};
+function normalizeGroupValue(type, value) {
+	if (type === "single") return Array.isArray(value) ? value[0] ?? null : value ?? null;
+	if (Array.isArray(value)) return value;
+	return value == null ? [] : [value];
+}
+const ToolbarToggleGroup = factory((_props) => {
+	const { classNames, className, style, styles, vars, type, value, defaultValue, onChange, disabled, children, ...others } = useProps("ToolbarToggleGroup", defaultProps, _props);
+	const ctx = useToolbarContext();
+	const [_value, handleChange] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: type === "single" ? null : [],
+		onChange
+	});
+	const normalizedValue = normalizeGroupValue(type, _value);
+	const handleItemChange = (itemValue) => {
+		if (type === "single") handleChange(normalizedValue === itemValue ? null : itemValue);
+		else {
+			const currentValue = normalizedValue;
+			if (currentValue.includes(itemValue)) handleChange(currentValue.filter((v) => v !== itemValue));
+			else handleChange([...currentValue, itemValue]);
+		}
+	};
+	return /* @__PURE__ */ jsx(ToolbarToggleGroupProvider, {
+		value: {
+			value: normalizedValue,
+			onChange: handleItemChange,
+			type,
+			disabled: disabled || false
+		},
+		children: /* @__PURE__ */ jsx(Box, {
+			...others,
+			role: "group",
+			...ctx.getStyles("group", {
+				className,
+				classNames,
+				style,
+				styles
+			}),
+			"data-orientation": ctx.orientation,
+			children
+		})
+	});
+});
+ToolbarToggleGroup.classes = Toolbar_module_default;
+ToolbarToggleGroup.displayName = "@mantine/core/ToolbarToggleGroup";
+//#endregion
+export { ToolbarToggleGroup };
+
+//# sourceMappingURL=ToolbarToggleGroup.mjs.map

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.mjs","names":["currentValue","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport {\n  ToolbarToggleGroupProvider,\n  type ToolbarToggleGroupContextValue,\n} from './ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleGroupStylesNames = 'group';\n\ninterface ToolbarToggleGroupBaseProps\n  extends\n    BoxProps,\n    CompoundStylesApiProps<ToolbarToggleGroupFactory>,\n    Omit<ElementProps<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  /** Disables all toggle items within this group */\n  disabled?: boolean;\n\n  /** `Toolbar.ToggleItem` components */\n  children: React.ReactNode;\n}\n\nexport interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'single';\n\n  /** Controlled value, `null` when no item is active */\n  value?: string | null;\n\n  /** Uncontrolled default value */\n  defaultValue?: string | null;\n\n  /** Called with the new value when an item is toggled, `null` when the active item is deselected */\n  onChange?: (value: string | null) => void;\n}\n\nexport interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'multiple';\n\n  /** Controlled value, array of active item values */\n  value?: string[];\n\n  /** Uncontrolled default value */\n  defaultValue?: string[];\n\n  /** Called with the array of active item values when an item is toggled */\n  onChange?: (value: string[]) => void;\n}\n\nexport type ToolbarToggleGroupProps =\n  | ToolbarToggleGroupSingleProps\n  | ToolbarToggleGroupMultipleProps;\n\nexport type ToolbarToggleGroupFactory = Factory<{\n  props: ToolbarToggleGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarToggleGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {} as Partial<ToolbarToggleGroupProps>;\n\nfunction normalizeGroupValue(\n  type: 'single' | 'multiple',\n  value: string | string[] | null | undefined\n): string | string[] | null {\n  if (type === 'single') {\n    return Array.isArray(value) ? (value[0] ?? null) : (value ?? null);\n  }\n\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value == null ? [] : [value];\n}\n\nexport const ToolbarToggleGroup = factory<ToolbarToggleGroupFactory>((_props) => {\n  const props = useProps('ToolbarToggleGroup', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    type,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    children,\n    ...others\n  } = props as ToolbarToggleGroupBaseProps & {\n    type: 'single' | 'multiple';\n    value?: string | string[] | null;\n    defaultValue?: string | string[] | null;\n    onChange?: (value: any) => void;\n  };\n\n  const ctx = useToolbarContext();\n\n  const finalValue = type === 'single' ? null : [];\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue,\n    onChange,\n  });\n\n  const normalizedValue = normalizeGroupValue(type, _value);\n\n  const handleItemChange = (itemValue: string) => {\n    if (type === 'single') {\n      const currentValue = normalizedValue as string | null;\n      handleChange(currentValue === itemValue ? null : itemValue);\n    } else {\n      const currentValue = normalizedValue as string[];\n      if (currentValue.includes(itemValue)) {\n        handleChange(currentValue.filter((v) => v !== itemValue));\n      } else {\n        handleChange([...currentValue, itemValue]);\n      }\n    }\n  };\n\n  const contextValue: ToolbarToggleGroupContextValue = {\n    value: normalizedValue,\n    onChange: handleItemChange,\n    type,\n    disabled: disabled || false,\n  };\n\n  return (\n    <ToolbarToggleGroupProvider value={contextValue}>\n      <Box\n        {...others}\n        role=\"group\"\n        {...ctx.getStyles('group', { className, classNames, style, styles })}\n        data-orientation={ctx.orientation}\n      >\n        {children}\n      </Box>\n    </ToolbarToggleGroupProvider>\n  );\n});\n\nToolbarToggleGroup.classes = classes;\nToolbarToggleGroup.displayName = '@mantine/core/ToolbarToggleGroup';\n"],"mappings":";;;;;;;;;;AAsEA,MAAM,eAAe,CAAC;AAEtB,SAAS,oBACP,MACA,OAC0B;CAC1B,IAAI,SAAS,UACX,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,MAAM,OAAS,SAAS;CAG/D,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;CAGT,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,KAAK;AACpC;AAEA,MAAa,qBAAqB,SAAoC,WAAW;CAE/E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,cACA,UACA,UACA,UACA,GAAG,WAbS,SAAS,sBAAsB,cAAc,MAcnD;CAOR,MAAM,MAAM,kBAAkB;CAG9B,MAAM,CAAC,QAAQ,gBAAgB,gBAAgB;EAC7C;EACA;EACA,YAJiB,SAAS,WAAW,OAAO,CAAC;EAK7C;CACF,CAAC;CAED,MAAM,kBAAkB,oBAAoB,MAAM,MAAM;CAExD,MAAM,oBAAoB,cAAsB;EAC9C,IAAI,SAAS,UAEX,aAAaA,oBAAiB,YAAY,OAAO,SAAS;OACrD;GACL,MAAM,eAAe;GACrB,IAAI,aAAa,SAAS,SAAS,GACjC,aAAa,aAAa,QAAQ,MAAM,MAAM,SAAS,CAAC;QAExD,aAAa,CAAC,GAAG,cAAc,SAAS,CAAC;EAE7C;CACF;CASA,OACE,oBAAC,4BAAD;EAA4B,OAAO;GAPnC,OAAO;GACP,UAAU;GACV;GACA,UAAU,YAAY;EAIwB;EAC5C,UAAA,oBAAC,KAAD;GACE,GAAI;GACJ,MAAK;GACL,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;GAAO,CAAC;GACnE,oBAAkB,IAAI;GAErB;EACE,CAAA;CACqB,CAAA;AAEhC,CAAC;AAED,mBAAmB,UAAUC;AAC7B,mBAAmB,cAAc"}

package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { useToolbarToggleGroupContext } from "../ToolbarToggleGroup/ToolbarToggleGroup.context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx
+const defaultProps = {};
+const ToolbarToggleItem = factory((_props) => {
+	const { classNames, className, style, styles, vars, value, disabled, autoWidth, children, onClick, ...others } = useProps("ToolbarToggleItem", defaultProps, _props);
+	const ctx = useToolbarContext();
+	const groupCtx = useToolbarToggleGroupContext();
+	const isActive = groupCtx.type === "single" ? groupCtx.value === value : groupCtx.value.includes(value);
+	const isDisabled = disabled || groupCtx.disabled;
+	return /* @__PURE__ */ jsx(Box, {
+		component: "button",
+		...others,
+		type: "button",
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": isActive || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled: isDisabled,
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-pressed": isActive,
+		onClick: (event) => {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			groupCtx.onChange(value);
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggleItem.classes = Toolbar_module_default;
+ToolbarToggleItem.displayName = "@mantine/core/ToolbarToggleItem";
+//#endregion
+export { ToolbarToggleItem };
+
+//# sourceMappingURL=ToolbarToggleItem.mjs.map

package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleItem.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport { useToolbarToggleGroupContext } from '../ToolbarToggleGroup/ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleItemStylesNames = 'toggle';\n\nexport interface ToolbarToggleItemProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarToggleItemFactory>, ElementProps<'button'> {\n  /** Value used to identify the item in ToggleGroup */\n  value: string;\n\n  /** If set, the toggle item is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle item width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleItemFactory = Factory<{\n  props: ToolbarToggleItemProps;\n  ref: HTMLButtonElement;\n  stylesNames: ToolbarToggleItemStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleItemProps> = {};\n\nexport const ToolbarToggleItem = factory<ToolbarToggleItemFactory>((_props) => {\n  const props = useProps('ToolbarToggleItem', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    disabled,\n    autoWidth,\n    children,\n    onClick,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n  const groupCtx = useToolbarToggleGroupContext();\n\n  const isActive =\n    groupCtx.type === 'single'\n      ? groupCtx.value === value\n      : (groupCtx.value as string[]).includes(value);\n\n  const isDisabled = disabled || groupCtx.disabled;\n\n  return (\n    <Box\n      component=\"button\"\n      {...others}\n      type=\"button\"\n      {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n      data-toolbar-toggle\n      data-active={isActive || undefined}\n      data-disabled={isDisabled || undefined}\n      data-auto-width={autoWidth || undefined}\n      disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : 0}\n      aria-pressed={isActive}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (isDisabled) {\n          event.preventDefault();\n          return;\n        }\n        groupCtx.onChange(value);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarToggleItem.classes = classes;\nToolbarToggleItem.displayName = '@mantine/core/ToolbarToggleItem';\n"],"mappings":";;;;;;;;;AAkCA,MAAM,eAAgD,CAAC;AAEvD,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,WACA,UACA,SACA,GAAG,WAZS,SAAS,qBAAqB,cAAc,MAalD;CACR,MAAM,MAAM,kBAAkB;CAC9B,MAAM,WAAW,6BAA6B;CAE9C,MAAM,WACJ,SAAS,SAAS,WACd,SAAS,UAAU,QAClB,SAAS,MAAmB,SAAS,KAAK;CAEjD,MAAM,aAAa,YAAY,SAAS;CAExC,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,YAAY,KAAA;EACzB,iBAAe,cAAc,KAAA;EAC7B,mBAAiB,aAAa,KAAA;EAC9B,UAAU;EACV,UAAU,aAAa,KAAK;EAC5B,gBAAc;EACd,UAAU,UAA+C;GACvD,IAAI,YAAY;IACd,MAAM,eAAe;IACrB;GACF;GACA,SAAS,SAAS,KAAK;GACvB,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}

package/esm/components/Toolbar/use-toolbar-navigation.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/@mantine/core/src/components/Toolbar/use-toolbar-navigation.ts
+function useToolbarNavigation({ orientation, loop, dir }) {
+	const toolbarRef = useRef(null);
+	const activeItemRef = useRef(null);
+	const getFocusableItems = useCallback(() => {
+		if (!toolbarRef.current) return [];
+		return Array.from(toolbarRef.current.querySelectorAll("[data-toolbar-toggle]:not([data-disabled])"));
+	}, []);
+	const syncTabIndex = useCallback(() => {
+		const items = getFocusableItems();
+		const tabStop = activeItemRef.current && items.includes(activeItemRef.current) ? activeItemRef.current : items[0];
+		items.forEach((item) => {
+			item.setAttribute("tabindex", item === tabStop ? "0" : "-1");
+		});
+	}, [getFocusableItems]);
+	useEffect(() => {
+		syncTabIndex();
+		const node = toolbarRef.current;
+		if (!node) return;
+		const observer = new MutationObserver(syncTabIndex);
+		observer.observe(node, {
+			childList: true,
+			subtree: true,
+			attributeFilter: ["data-disabled"]
+		});
+		return () => observer.disconnect();
+	}, [syncTabIndex]);
+	return {
+		toolbarRef,
+		handleKeyDown: useCallback((event) => {
+			const items = getFocusableItems();
+			if (items.length === 0) return;
+			const currentIndex = items.findIndex((item) => item === document.activeElement);
+			if (currentIndex === -1) return;
+			let nextIndex = null;
+			const forwardKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+			const backwardKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+			const isForward = orientation === "horizontal" && event.key === forwardKey || orientation === "vertical" && event.key === "ArrowDown";
+			const isBackward = orientation === "horizontal" && event.key === backwardKey || orientation === "vertical" && event.key === "ArrowUp";
+			if (isForward) {
+				event.preventDefault();
+				if (currentIndex < items.length - 1) nextIndex = currentIndex + 1;
+				else if (loop) nextIndex = 0;
+			} else if (isBackward) {
+				event.preventDefault();
+				if (currentIndex > 0) nextIndex = currentIndex - 1;
+				else if (loop) nextIndex = items.length - 1;
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				nextIndex = 0;
+			} else if (event.key === "End") {
+				event.preventDefault();
+				nextIndex = items.length - 1;
+			}
+			if (nextIndex !== null) items[nextIndex].focus();
+		}, [
+			orientation,
+			loop,
+			dir,
+			getFocusableItems
+		]),
+		handleItemFocus: useCallback((event) => {
+			const target = event.target;
+			if (getFocusableItems().includes(target)) {
+				activeItemRef.current = target;
+				syncTabIndex();
+			}
+		}, [getFocusableItems, syncTabIndex])
+	};
+}
+//#endregion
+export { useToolbarNavigation };
+
+//# sourceMappingURL=use-toolbar-navigation.mjs.map

package/esm/components/Toolbar/use-toolbar-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toolbar-navigation.mjs","names":[],"sources":["../../../src/components/Toolbar/use-toolbar-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseToolbarNavigationOptions {\n  orientation: 'horizontal' | 'vertical';\n  loop: boolean;\n  dir: 'ltr' | 'rtl';\n}\n\nexport function useToolbarNavigation({ orientation, loop, dir }: UseToolbarNavigationOptions) {\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const activeItemRef = useRef<HTMLElement | null>(null);\n\n  const getFocusableItems = useCallback((): HTMLElement[] => {\n    if (!toolbarRef.current) {\n      return [];\n    }\n    return Array.from(\n      toolbarRef.current.querySelectorAll<HTMLElement>('[data-toolbar-toggle]:not([data-disabled])')\n    );\n  }, []);\n\n  const syncTabIndex = useCallback(() => {\n    const items = getFocusableItems();\n    const tabStop =\n      activeItemRef.current && items.includes(activeItemRef.current)\n        ? activeItemRef.current\n        : items[0];\n\n    items.forEach((item) => {\n      item.setAttribute('tabindex', item === tabStop ? '0' : '-1');\n    });\n  }, [getFocusableItems]);\n\n  useEffect(() => {\n    syncTabIndex();\n\n    const node = toolbarRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new MutationObserver(syncTabIndex);\n    observer.observe(node, { childList: true, subtree: true, attributeFilter: ['data-disabled'] });\n\n    return () => observer.disconnect();\n  }, [syncTabIndex]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const items = getFocusableItems();\n      if (items.length === 0) {\n        return;\n      }\n\n      const currentIndex = items.findIndex((item) => item === document.activeElement);\n      if (currentIndex === -1) {\n        return;\n      }\n\n      let nextIndex: number | null = null;\n\n      const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n      const backwardKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n      const isForward =\n        (orientation === 'horizontal' && event.key === forwardKey) ||\n        (orientation === 'vertical' && event.key === 'ArrowDown');\n\n      const isBackward =\n        (orientation === 'horizontal' && event.key === backwardKey) ||\n        (orientation === 'vertical' && event.key === 'ArrowUp');\n\n      if (isForward) {\n        event.preventDefault();\n        if (currentIndex < items.length - 1) {\n          nextIndex = currentIndex + 1;\n        } else if (loop) {\n          nextIndex = 0;\n        }\n      } else if (isBackward) {\n        event.preventDefault();\n        if (currentIndex > 0) {\n          nextIndex = currentIndex - 1;\n        } else if (loop) {\n          nextIndex = items.length - 1;\n        }\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        nextIndex = 0;\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        nextIndex = items.length - 1;\n      }\n\n      if (nextIndex !== null) {\n        items[nextIndex].focus();\n      }\n    },\n    [orientation, loop, dir, getFocusableItems]\n  );\n\n  const handleItemFocus = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      const target = event.target as HTMLElement;\n      if (getFocusableItems().includes(target)) {\n        activeItemRef.current = target;\n        syncTabIndex();\n      }\n    },\n    [getFocusableItems, syncTabIndex]\n  );\n\n  return { toolbarRef, handleKeyDown, handleItemFocus };\n}\n"],"mappings":";;;AAQA,SAAgB,qBAAqB,EAAE,aAAa,MAAM,OAAoC;CAC5F,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,oBAAoB,kBAAiC;EACzD,IAAI,CAAC,WAAW,SACd,OAAO,CAAC;EAEV,OAAO,MAAM,KACX,WAAW,QAAQ,iBAA8B,4CAA4C,CAC/F;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,MAAM,QAAQ,kBAAkB;EAChC,MAAM,UACJ,cAAc,WAAW,MAAM,SAAS,cAAc,OAAO,IACzD,cAAc,UACd,MAAM;EAEZ,MAAM,SAAS,SAAS;GACtB,KAAK,aAAa,YAAY,SAAS,UAAU,MAAM,IAAI;EAC7D,CAAC;CACH,GAAG,CAAC,iBAAiB,CAAC;CAEtB,gBAAgB;EACd,aAAa;EAEb,MAAM,OAAO,WAAW;EACxB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,iBAAiB,YAAY;EAClD,SAAS,QAAQ,MAAM;GAAE,WAAW;GAAM,SAAS;GAAM,iBAAiB,CAAC,eAAe;EAAE,CAAC;EAE7F,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,YAAY,CAAC;CAmEjB,OAAO;EAAE;EAAY,eAjEC,aACnB,UAA+C;GAC9C,MAAM,QAAQ,kBAAkB;GAChC,IAAI,MAAM,WAAW,GACnB;GAGF,MAAM,eAAe,MAAM,WAAW,SAAS,SAAS,SAAS,aAAa;GAC9E,IAAI,iBAAiB,IACnB;GAGF,IAAI,YAA2B;GAE/B,MAAM,aAAa,QAAQ,QAAQ,cAAc;GACjD,MAAM,cAAc,QAAQ,QAAQ,eAAe;GAEnD,MAAM,YACH,gBAAgB,gBAAgB,MAAM,QAAQ,cAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,MAAM,aACH,gBAAgB,gBAAgB,MAAM,QAAQ,eAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,IAAI,WAAW;IACb,MAAM,eAAe;IACrB,IAAI,eAAe,MAAM,SAAS,GAChC,YAAY,eAAe;SACtB,IAAI,MACT,YAAY;GAEhB,OAAO,IAAI,YAAY;IACrB,MAAM,eAAe;IACrB,IAAI,eAAe,GACjB,YAAY,eAAe;SACtB,IAAI,MACT,YAAY,MAAM,SAAS;GAE/B,OAAO,IAAI,MAAM,QAAQ,QAAQ;IAC/B,MAAM,eAAe;IACrB,YAAY;GACd,OAAO,IAAI,MAAM,QAAQ,OAAO;IAC9B,MAAM,eAAe;IACrB,YAAY,MAAM,SAAS;GAC7B;GAEA,IAAI,cAAc,MAChB,MAAM,UAAU,CAAC,MAAM;EAE3B,GACA;GAAC;GAAa;GAAM;GAAK;EAAiB,CAcX;EAAG,iBAXZ,aACrB,UAA4C;GAC3C,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG;IACxC,cAAc,UAAU;IACxB,aAAa;GACf;EACF,GACA,CAAC,mBAAmB,YAAY,CAGgB;CAAE;AACtD"}

package/esm/components/Tooltip/Tooltip.mjs

@@ -47,7 +47,8 @@ const defaultProps = {
 		flip: true,
 		shift: true,
 		inline: false
-	}
+	},
+	hideDetached: true
 };
 const varsResolver = createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
 	const colors = theme.variantColorResolver({
@@ -64,7 +65,7 @@ const varsResolver = createVarsResolver((theme, { radius, color, variant, autoCo
 });
 const Tooltip = factory((_props) => {
 	const props = useProps("Tooltip", defaultProps, _props);
-	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
+	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, hideDetached, ref, ...others } = props;
 	const { dir } = useDirection();
 	const arrowRef = useRef(null);
 	const tooltip = useTooltip({
@@ -81,7 +82,8 @@ const Tooltip = factory((_props) => {
 		offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
 		inline,
 		strategy: floatingStrategy,
-		middlewares
+		middlewares,
+		hideDetached
 	});
 	useEffect(() => {
 		const targetNode = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : target?.current || null;
@@ -140,7 +142,8 @@ const Tooltip = factory((_props) => {
 							...mergeStyles,
 							zIndex,
 							top: tooltip.y ?? 0,
-							left: tooltip.x ?? 0
+							left: tooltip.x ?? 0,
+							...tooltip.referenceHidden ? { display: "none" } : null
 						}
 					}),
 					children: [label, /* @__PURE__ */ jsx(FloatingArrow, {
@@ -190,7 +193,8 @@ const Tooltip = factory((_props) => {
 						...mergeStyles,
 						zIndex,
 						top: tooltip.y ?? 0,
-						left: tooltip.x ?? 0
+						left: tooltip.x ?? 0,
+						...tooltip.referenceHidden ? { display: "none" } : null
 					}
 				}),
 				children: [label, /* @__PURE__ */ jsx(FloatingArrow, {