@mantine/core 9.6.3 → 9.7.0

package/esm/components/HoverCard/HoverCard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n  HoverCardGroup,\n  HoverCardGroupContextValue,\n  HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n  /** Initial opened state */\n  initiallyOpened?: boolean;\n\n  /** Called when the dropdown is opened */\n  onOpen?: () => void;\n\n  /** Called when the dropdown is closed */\n  onClose?: () => void;\n\n  /**\n   * Delay in ms before the dropdown opens after mouse enters the target.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 0\n   */\n  openDelay?: number;\n\n  /**\n   * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 150\n   */\n  closeDelay?: number;\n}\n\nexport type HoverCardFactory = Factory<{\n  props: HoverCardProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  openDelay: 0,\n  closeDelay: 150,\n  initiallyOpened: false,\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n  const { children, onOpen, onClose, openDelay, closeDelay, initiallyOpened, ...others } = useProps(\n    'HoverCard',\n    defaultProps,\n    props\n  );\n\n  const hoverCard = useHoverCard({\n    openDelay,\n    closeDelay,\n    defaultOpened: initiallyOpened,\n    onOpen,\n    onClose,\n  });\n\n  return (\n    <HoverCardContext\n      value={{\n        openDropdown: hoverCard.openDropdown,\n        closeDropdown: hoverCard.closeDropdown,\n        assignTarget: hoverCard.assignTarget,\n        getReferenceProps: hoverCard.getReferenceProps,\n        getFloatingProps: hoverCard.getFloatingProps,\n        reference: hoverCard.reference,\n        floating: hoverCard.floating,\n      }}\n    >\n      <Popover {...others} opened={hoverCard.opened} __staticSelector=\"HoverCard\">\n        {children}\n      </Popover>\n    </HoverCardContext>\n  );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n  export type Props = HoverCardProps;\n  export type DropdownProps = HoverCardDropdownProps;\n  export type TargetProps = HoverCardTargetProps;\n  export type GroupProps = HoverCardGroupProps;\n  export type ContextValue = HoverCardContextValue;\n\n  export namespace Group {\n    export type Props = HoverCardGroupProps;\n    export type ContextValue = HoverCardGroupContextValue;\n  }\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;AACnB;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EAAE,UAAU,QAAQ,SAAS,WAAW,YAAY,iBAAiB,GAAG,WAAW,SACvF,aACA,cACA,KACF;CAEA,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;EACtB;EAEA,UAAA,oBAAC,SAAD;GAAS,GAAI;GAAQ,QAAQ,UAAU;GAAQ,kBAAiB;GAC7D;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}
+{"version":3,"file":"HoverCard.mjs","names":[],"sources":["../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import { ExtendComponent, Factory, useProps } from '../../core';\nimport { Popover, PopoverProps, PopoverStylesNames } from '../Popover';\nimport { PopoverCssVariables } from '../Popover/Popover';\nimport { HoverCardContext, HoverCardContextValue } from './HoverCard.context';\nimport { HoverCardDropdown, HoverCardDropdownProps } from './HoverCardDropdown/HoverCardDropdown';\nimport {\n  HoverCardGroup,\n  HoverCardGroupContextValue,\n  HoverCardGroupProps,\n} from './HoverCardGroup/HoverCardGroup';\nimport { HoverCardTarget, HoverCardTargetProps } from './HoverCardTarget/HoverCardTarget';\nimport { useHoverCard } from './use-hover-card';\n\nexport interface HoverCardEvents {\n  /** Determines whether the dropdown should be opened when the target is hovered @default true */\n  hover?: boolean;\n\n  /** Determines whether the dropdown should be opened when the target is focused with the keyboard @default true */\n  focus?: boolean;\n\n  /** Determines whether the dropdown should be opened when the target is tapped on touch devices. Requires `hover` to be enabled @default false */\n  touch?: boolean;\n}\n\nexport interface HoverCardProps extends Omit<PopoverProps, 'opened' | 'onChange'> {\n  /** Initial opened state */\n  initiallyOpened?: boolean;\n\n  /** Called when the dropdown is opened */\n  onOpen?: () => void;\n\n  /** Called when the dropdown is closed */\n  onClose?: () => void;\n\n  /**\n   * Delay in ms before the dropdown opens after mouse enters the target.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 0\n   */\n  openDelay?: number;\n\n  /**\n   * Delay in ms before the dropdown closes after mouse leaves the target or dropdown.\n   * Overridden by HoverCard.Group delay if used within a group.\n   * @default 150\n   */\n  closeDelay?: number;\n\n  /**\n   * Determines which events open the dropdown. Fields that are not specified keep their default values.\n   * @default { hover: true, focus: true, touch: false }\n   */\n  events?: HoverCardEvents;\n\n  /**\n   * If set, the dropdown stays open while the pointer travels from the target to the dropdown\n   * and remains over it. Set it if the dropdown contains interactive content.\n   * @default false\n   */\n  interactive?: boolean;\n\n  /**\n   * Accessible relation between the target and the dropdown. `dialog` sets `aria-haspopup`,\n   * `aria-expanded` and `aria-controls` on the target, `tooltip` sets `aria-describedby` instead\n   * and should be used if the dropdown contains only descriptive content.\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'tooltip';\n\n  /** Determines whether the dropdown should be closed when the user presses outside of the target and the dropdown @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Not supported by `HoverCard`: outside press is always detected with the `pointerdown` event. Use `closeOnClickOutside` to disable it. */\n  clickOutsideEvents?: string[];\n\n  /**\n   * Determines whether focus should be returned to the target when the dropdown closes.\n   * Ignored when focus activation is enabled (`events.focus`, the default), otherwise moving\n   * focus away from the target would return it and reopen the dropdown.\n   * `Escape` pressed inside the dropdown always returns focus to the target.\n   * @default false\n   */\n  returnFocus?: boolean;\n\n  /** Called when the dropdown is closed with `Escape` key or with a press outside of the target and the dropdown */\n  onDismiss?: () => void;\n}\n\nexport type HoverCardFactory = Factory<{\n  props: HoverCardProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst DEFAULT_EVENTS = { hover: true, focus: true, touch: false };\n\nconst defaultProps = {\n  openDelay: 0,\n  closeDelay: 150,\n  initiallyOpened: false,\n  interactive: false,\n  closeOnEscape: true,\n  closeOnClickOutside: true,\n  role: 'dialog',\n} satisfies Partial<HoverCardProps>;\n\nexport function HoverCard(props: HoverCardProps) {\n  const {\n    children,\n    onOpen,\n    onClose,\n    openDelay,\n    closeDelay,\n    initiallyOpened,\n    events,\n    interactive,\n    closeOnEscape,\n    closeOnClickOutside,\n    returnFocus,\n    onDismiss,\n    id,\n    role,\n    withRoles,\n    ...others\n  } = useProps('HoverCard', defaultProps, props);\n\n  const resolvedEvents = { ...DEFAULT_EVENTS, ...events };\n  const rolesEnabled = withRoles !== false;\n\n  const hoverCard = useHoverCard({\n    openDelay,\n    closeDelay,\n    defaultOpened: initiallyOpened,\n    onOpen,\n    onClose,\n    events: resolvedEvents,\n    interactive,\n    closeOnEscape,\n    closeOnClickOutside,\n    onDismiss,\n    id,\n  });\n\n  return (\n    <HoverCardContext\n      value={{\n        openDropdown: hoverCard.openDropdown,\n        closeDropdown: hoverCard.closeDropdown,\n        assignTarget: hoverCard.assignTarget,\n        getReferenceProps: hoverCard.getReferenceProps,\n        getFloatingProps: hoverCard.getFloatingProps,\n        reference: hoverCard.reference,\n        floating: hoverCard.floating,\n        opened: hoverCard.opened!,\n        dropdownId: hoverCard.dropdownId,\n        role,\n        withRoles: rolesEnabled,\n      }}\n    >\n      <Popover\n        {...others}\n        id={id}\n        closeOnEscape={closeOnEscape}\n        closeOnClickOutside={closeOnClickOutside}\n        returnFocus={resolvedEvents.focus ? false : returnFocus}\n        withRoles={role === 'tooltip' ? false : withRoles}\n        opened={hoverCard.opened}\n        __staticSelector=\"HoverCard\"\n      >\n        {children}\n      </Popover>\n    </HoverCardContext>\n  );\n}\n\nHoverCard.displayName = '@mantine/core/HoverCard';\nHoverCard.Target = HoverCardTarget;\nHoverCard.Dropdown = HoverCardDropdown;\nHoverCard.Group = HoverCardGroup;\nHoverCard.extend = (input: ExtendComponent<HoverCardFactory>) => input;\n\nexport namespace HoverCard {\n  export type Props = HoverCardProps;\n  export type Events = HoverCardEvents;\n  export type DropdownProps = HoverCardDropdownProps;\n  export type TargetProps = HoverCardTargetProps;\n  export type GroupProps = HoverCardGroupProps;\n  export type ContextValue = HoverCardContextValue;\n\n  export namespace Group {\n    export type Props = HoverCardGroupProps;\n    export type ContextValue = HoverCardGroupContextValue;\n  }\n}\n"],"mappings":";;;;;;;;;;AA8FA,MAAM,iBAAiB;CAAE,OAAO;CAAM,OAAO;CAAM,OAAO;AAAM;AAEhE,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;CACZ,iBAAiB;CACjB,aAAa;CACb,eAAe;CACf,qBAAqB;CACrB,MAAM;AACR;AAEA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,UACA,QACA,SACA,WACA,YACA,iBACA,QACA,aACA,eACA,qBACA,aACA,WACA,IACA,MACA,WACA,GAAG,WACD,SAAS,aAAa,cAAc,KAAK;CAE7C,MAAM,iBAAiB;EAAE,GAAG;EAAgB,GAAG;CAAO;CACtD,MAAM,eAAe,cAAc;CAEnC,MAAM,YAAY,aAAa;EAC7B;EACA;EACA,eAAe;EACf;EACA;EACA,QAAQ;EACR;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL,cAAc,UAAU;GACxB,eAAe,UAAU;GACzB,cAAc,UAAU;GACxB,mBAAmB,UAAU;GAC7B,kBAAkB,UAAU;GAC5B,WAAW,UAAU;GACrB,UAAU,UAAU;GACpB,QAAQ,UAAU;GAClB,YAAY,UAAU;GACtB;GACA,WAAW;EACb;EAEA,UAAA,oBAAC,SAAD;GACE,GAAI;GACA;GACW;GACM;GACrB,aAAa,eAAe,QAAQ,QAAQ;GAC5C,WAAW,SAAS,YAAY,QAAQ;GACxC,QAAQ,UAAU;GAClB,kBAAiB;GAEhB;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AACnB,UAAU,WAAW;AACrB,UAAU,QAAQ;AAClB,UAAU,UAAU,UAA6C"}

package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs

@@ -3,29 +3,24 @@ import { createEventHandler } from "../../../core/utils/create-event-handler/cre
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useHoverCardContext } from "../HoverCard.context.mjs";
-import { HoverCardGroupContext } from "../HoverCardGroup/HoverCardGroup.mjs";
-import { use } from "react";
+import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx
 function HoverCardDropdown(props) {
-	const { children, onMouseEnter, onMouseLeave, ...others } = useProps("HoverCardDropdown", null, props);
+	const { children, onMouseEnter, onMouseLeave, ref, ...others } = useProps("HoverCardDropdown", null, props);
 	const ctx = useHoverCardContext();
-	if (use(HoverCardGroupContext).withinGroup && ctx.getFloatingProps && ctx.floating) {
-		const floatingProps = ctx.getFloatingProps();
-		return /* @__PURE__ */ jsx(Popover.Dropdown, {
-			ref: ctx.floating,
-			...floatingProps,
-			onMouseEnter: createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
-			onMouseLeave: createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
-			...others,
-			children
-		});
-	}
-	const handleMouseEnter = createEventHandler(onMouseEnter, ctx.openDropdown);
-	const handleMouseLeave = createEventHandler(onMouseLeave, ctx.closeDropdown);
+	const floatingProps = ctx.getFloatingProps();
+	const mergedRef = useMergedRef(ctx.floating, ref);
+	const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? {
+		role: "tooltip",
+		id: ctx.dropdownId
+	} : void 0;
 	return /* @__PURE__ */ jsx(Popover.Dropdown, {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
+		ref: mergedRef,
+		...floatingProps,
+		...accessibleProps,
+		onMouseEnter: createEventHandler(onMouseEnter, floatingProps.onMouseEnter),
+		onMouseLeave: createEventHandler(onMouseLeave, floatingProps.onMouseLeave),
 		...others,
 		children
 	});

package/esm/components/HoverCard/HoverCardDropdown/HoverCardDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardDropdown.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { use } from 'react';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n  const { children, onMouseEnter, onMouseLeave, ...others } = useProps(\n    'HoverCardDropdown',\n    null,\n    props\n  );\n\n  const ctx = useHoverCardContext();\n  const groupCtx = use(HoverCardGroupContext);\n\n  if (groupCtx.withinGroup && ctx.getFloatingProps && ctx.floating) {\n    const floatingProps = ctx.getFloatingProps();\n\n    return (\n      <Popover.Dropdown\n        ref={ctx.floating}\n        {...floatingProps}\n        onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n        onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n        {...others}\n      >\n        {children}\n      </Popover.Dropdown>\n    );\n  }\n\n  const handleMouseEnter = createEventHandler<any>(onMouseEnter, ctx.openDropdown);\n  const handleMouseLeave = createEventHandler<any>(onMouseLeave!, ctx.closeDropdown);\n\n  return (\n    <Popover.Dropdown onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...others}>\n      {children}\n    </Popover.Dropdown>\n  );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;;AAWA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,GAAG,WAAW,SAC1D,qBACA,MACA,KACF;CAEA,MAAM,MAAM,oBAAoB;CAGhC,IAFiB,IAAI,qBAEV,CAAC,CAAC,eAAe,IAAI,oBAAoB,IAAI,UAAU;EAChE,MAAM,gBAAgB,IAAI,iBAAiB;EAE3C,OACE,oBAAC,QAAQ,UAAT;GACE,KAAK,IAAI;GACT,GAAI;GACJ,cAAc,mBAAwB,cAAc,cAAc,YAAY;GAC9E,cAAc,mBAAwB,cAAc,cAAc,YAAY;GAC9E,GAAI;GAEH;EACe,CAAA;CAEtB;CAEA,MAAM,mBAAmB,mBAAwB,cAAc,IAAI,YAAY;CAC/E,MAAM,mBAAmB,mBAAwB,cAAe,IAAI,aAAa;CAEjF,OACE,oBAAC,QAAQ,UAAT;EAAkB,cAAc;EAAkB,cAAc;EAAkB,GAAI;EACnF;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}
+{"version":3,"file":"HoverCardDropdown.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx"],"sourcesContent":["import { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardDropdownProps extends PopoverDropdownProps {\n  /** Dropdown content */\n  children?: React.ReactNode;\n}\n\nexport function HoverCardDropdown(props: HoverCardDropdownProps) {\n  const { children, onMouseEnter, onMouseLeave, ref, ...others } = useProps(\n    'HoverCardDropdown',\n    null,\n    props\n  );\n\n  const ctx = useHoverCardContext();\n  const floatingProps = ctx.getFloatingProps();\n  const mergedRef = useMergedRef(ctx.floating, ref);\n\n  const accessibleProps =\n    ctx.withRoles && ctx.role === 'tooltip' ? { role: 'tooltip', id: ctx.dropdownId } : undefined;\n\n  return (\n    <Popover.Dropdown\n      ref={mergedRef}\n      {...floatingProps}\n      {...accessibleProps}\n      onMouseEnter={createEventHandler<any>(onMouseEnter, floatingProps.onMouseEnter)}\n      onMouseLeave={createEventHandler<any>(onMouseLeave, floatingProps.onMouseLeave)}\n      {...others}\n    >\n      {children}\n    </Popover.Dropdown>\n  );\n}\n\nHoverCardDropdown.displayName = '@mantine/core/HoverCardDropdown';\n"],"mappings":";;;;;;;;AAUA,SAAgB,kBAAkB,OAA+B;CAC/D,MAAM,EAAE,UAAU,cAAc,cAAc,KAAK,GAAG,WAAW,SAC/D,qBACA,MACA,KACF;CAEA,MAAM,MAAM,oBAAoB;CAChC,MAAM,gBAAgB,IAAI,iBAAiB;CAC3C,MAAM,YAAY,aAAa,IAAI,UAAU,GAAG;CAEhD,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAAY;EAAE,MAAM;EAAW,IAAI,IAAI;CAAW,IAAI,KAAA;CAEtF,OACE,oBAAC,QAAQ,UAAT;EACE,KAAK;EACL,GAAI;EACJ,GAAI;EACJ,cAAc,mBAAwB,cAAc,cAAc,YAAY;EAC9E,cAAc,mBAAwB,cAAc,cAAc,YAAY;EAC9E,GAAI;EAEH;CACe,CAAA;AAEtB;AAEA,kBAAkB,cAAc"}

package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs

@@ -1,12 +1,10 @@
 "use client";
-import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
 import { getRefProp } from "../../../core/utils/get-ref-prop/get-ref-prop.mjs";
 import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useHoverCardContext } from "../HoverCard.context.mjs";
-import { HoverCardGroupContext } from "../HoverCardGroup/HoverCardGroup.mjs";
-import { cloneElement, use } from "react";
+import { cloneElement } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx
@@ -16,28 +14,13 @@ function HoverCardTarget(props) {
 	const child = getSingleElementChild(children);
 	if (!child) throw new Error("HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
 	const ctx = useHoverCardContext();
-	const groupContext = use(HoverCardGroupContext);
-	const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);
-	if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {
-		const referenceProps = ctx.getReferenceProps();
-		return /* @__PURE__ */ jsx(Popover.Target, {
-			refProp,
-			...others,
-			children: cloneElement(child, eventPropsWrapperName ? { [eventPropsWrapperName]: {
-				...referenceProps,
-				ref: ctx.reference
-			} } : {
-				...referenceProps,
-				ref: ctx.reference
-			})
-		});
-	}
-	const eventListeners = {
-		onMouseEnter: createEventHandler(child.props.onMouseEnter, ctx.openDropdown),
-		onMouseLeave: createEventHandler(child.props.onMouseLeave, ctx.closeDropdown)
-	};
+	const childProps = child.props;
+	const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget, ctx.reference);
+	const referenceProps = ctx.getReferenceProps(eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps);
+	const accessibleProps = ctx.withRoles && ctx.role === "tooltip" ? { "aria-describedby": [childProps["aria-describedby"], ctx.opened ? ctx.dropdownId : null].filter(Boolean).join(" ") || void 0 } : void 0;
 	const clonedProps = {
-		...eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners,
+		...eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps,
+		...accessibleProps,
 		ref: targetRef
 	};
 	return /* @__PURE__ */ jsx(Popover.Target, {

package/esm/components/HoverCard/HoverCardTarget/HoverCardTarget.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement, use } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { createEventHandler, getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\nimport { HoverCardGroupContext } from '../HoverCardGroup/HoverCardGroup';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n  /**\n   * Name of the prop to wrap event listeners in.\n   * Use when the target component expects event listeners in a nested object.\n   * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n   * @default undefined (event listeners passed directly to component)\n   */\n  eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n  const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n    'HoverCardTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'HoverCard.Target 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 ctx = useHoverCardContext();\n  const groupContext = use(HoverCardGroupContext);\n  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);\n\n  if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {\n    const referenceProps = ctx.getReferenceProps();\n\n    return (\n      <Popover.Target refProp={refProp} {...others}>\n        {cloneElement(\n          child,\n          eventPropsWrapperName\n            ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }\n            : { ...referenceProps, ref: ctx.reference }\n        )}\n      </Popover.Target>\n    );\n  }\n\n  const onMouseEnter = createEventHandler((child.props as any).onMouseEnter, ctx.openDropdown);\n  const onMouseLeave = createEventHandler((child.props as any).onMouseLeave, ctx.closeDropdown);\n\n  const eventListeners = { onMouseEnter, onMouseLeave };\n\n  const clonedProps: any = {\n    ...(eventPropsWrapperName ? { [eventPropsWrapperName]: eventListeners } : eventListeners),\n    ref: targetRef,\n  };\n\n  return (\n    <Popover.Target refProp={refProp} {...others}>\n      {cloneElement(child, clonedProps)}\n    </Popover.Target>\n  );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;;;AAiBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAW,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,oBAAoB;CAChC,MAAM,eAAe,IAAI,qBAAqB;CAC9C,MAAM,YAAY,aAAa,WAAW,KAAK,GAAG,IAAI,YAAY;CAElE,IAAI,aAAa,eAAe,IAAI,qBAAqB,IAAI,WAAW;EACtE,MAAM,iBAAiB,IAAI,kBAAkB;EAE7C,OACE,oBAAC,QAAQ,QAAT;GAAyB;GAAS,GAAI;GACnC,UAAA,aACC,OACA,wBACI,GAAG,wBAAwB;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,EAAE,IACrE;IAAE,GAAG;IAAgB,KAAK,IAAI;GAAU,CAC9C;EACc,CAAA;CAEpB;CAKA,MAAM,iBAAiB;EAAE,cAHJ,mBAAoB,MAAM,MAAc,cAAc,IAAI,YAG3C;EAAG,cAFlB,mBAAoB,MAAM,MAAc,cAAc,IAAI,aAE7B;CAAE;CAEpD,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,KAAK;CACP;CAEA,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnC,UAAA,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"HoverCardTarget.mjs","names":[],"sources":["../../../../src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { getRefProp, getSingleElementChild, useProps } from '../../../core';\nimport { Popover, PopoverTargetProps } from '../../Popover';\nimport { useHoverCardContext } from '../HoverCard.context';\n\nexport interface HoverCardTargetProps extends PopoverTargetProps {\n  /**\n   * Name of the prop to wrap event listeners in.\n   * Use when the target component expects event listeners in a nested object.\n   * For example, some components expect `componentProps={{ onMouseEnter, onMouseLeave }}`.\n   * @default undefined (event listeners passed directly to component)\n   */\n  eventPropsWrapperName?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<HoverCardTargetProps>;\n\nexport function HoverCardTarget(props: HoverCardTargetProps) {\n  const { children, refProp, eventPropsWrapperName, ...others } = useProps(\n    'HoverCardTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'HoverCard.Target 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 ctx = useHoverCardContext();\n  const childProps = child.props as any;\n  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget, ctx.reference);\n\n  const referenceProps = ctx.getReferenceProps(\n    eventPropsWrapperName ? childProps[eventPropsWrapperName] : childProps\n  );\n\n  const accessibleProps =\n    ctx.withRoles && ctx.role === 'tooltip'\n      ? {\n          'aria-describedby':\n            [childProps['aria-describedby'], ctx.opened ? ctx.dropdownId : null]\n              .filter(Boolean)\n              .join(' ') || undefined,\n        }\n      : undefined;\n\n  const clonedProps: any = {\n    ...(eventPropsWrapperName ? { [eventPropsWrapperName]: referenceProps } : referenceProps),\n    ...accessibleProps,\n    ref: targetRef,\n  };\n\n  return (\n    <Popover.Target refProp={refProp} {...others}>\n      {cloneElement(child, clonedProps)}\n    </Popover.Target>\n  );\n}\n\nHoverCardTarget.displayName = '@mantine/core/HoverCardTarget';\n"],"mappings":";;;;;;;;;;AAgBA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,SAAgB,gBAAgB,OAA6B;CAC3D,MAAM,EAAE,UAAU,SAAS,uBAAuB,GAAG,WAAW,SAC9D,mBACA,cACA,KACF;CAEA,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oKACF;CAGF,MAAM,MAAM,oBAAoB;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,aAAa,WAAW,KAAK,GAAG,IAAI,cAAc,IAAI,SAAS;CAEjF,MAAM,iBAAiB,IAAI,kBACzB,wBAAwB,WAAW,yBAAyB,UAC9D;CAEA,MAAM,kBACJ,IAAI,aAAa,IAAI,SAAS,YAC1B,EACE,oBACE,CAAC,WAAW,qBAAqB,IAAI,SAAS,IAAI,aAAa,IAAI,CAAC,CACjE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA,EACpB,IACA,KAAA;CAEN,MAAM,cAAmB;EACvB,GAAI,wBAAwB,GAAG,wBAAwB,eAAe,IAAI;EAC1E,GAAG;EACH,KAAK;CACP;CAEA,OACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,GAAI;EACnC,UAAA,aAAa,OAAO,WAAW;CAClB,CAAA;AAEpB;AAEA,gBAAgB,cAAc"}

package/esm/components/HoverCard/use-hover-card.mjs

@@ -2,13 +2,15 @@
 import { HoverCardGroupContext } from "./HoverCardGroup/HoverCardGroup.mjs";
 import { use, useCallback, useEffect, useRef, useState } from "react";
 import { useId as useId$1 } from "@mantine/hooks";
-import { useDelayGroup, useDismiss, useFloating, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { safePolygon, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/HoverCard/use-hover-card.ts
 function useHoverCard(settings) {
 	const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);
 	const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
 	const withinGroup = use(HoverCardGroupContext).withinGroup;
-	const uid = useId$1();
+	const uid = useId$1(settings.id);
+	const openedRef = useRef(opened);
+	openedRef.current = opened;
 	const openTimeout = useRef(-1);
 	const closeTimeout = useRef(-1);
 	const targetRef = useRef(null);
@@ -20,6 +22,8 @@ function useHoverCard(settings) {
 		window.clearTimeout(closeTimeout.current);
 	}, []);
 	const onChange = useCallback((_opened) => {
+		if (openedRef.current === _opened) return;
+		openedRef.current = _opened;
 		setUncontrolledOpened(_opened);
 		if (_opened) {
 			setCurrentId(uid);
@@ -30,40 +34,49 @@ function useHoverCard(settings) {
 		settings.onOpen,
 		settings.onClose
 	]);
+	const onOpenChange = useCallback((_opened, _event, reason) => {
+		const wasOpened = openedRef.current;
+		onChange(_opened);
+		if (wasOpened && !_opened && (reason === "escape-key" || reason === "outside-press")) settings.onDismiss?.();
+	}, [onChange, settings.onDismiss]);
 	const { context, refs } = useFloating({
 		open: opened,
-		onOpenChange: onChange
+		onOpenChange
 	});
 	const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });
 	const { getReferenceProps, getFloatingProps } = useInteractions([
 		useHover(context, {
-			enabled: true,
+			enabled: settings.events.hover,
 			delay: withinGroup ? groupDelay : {
 				open: settings.openDelay,
 				close: settings.closeDelay
-			}
+			},
+			mouseOnly: !settings.events.touch,
+			handleClose: settings.interactive ? safePolygon() : null
+		}),
+		useFocus(context, {
+			enabled: settings.events.focus,
+			visibleOnly: true
 		}),
-		useRole(context, { role: "dialog" }),
-		useDismiss(context, { enabled: withinGroup })
+		useDismiss(context, {
+			escapeKey: settings.closeOnEscape,
+			outsidePress: settings.closeOnClickOutside
+		})
 	]);
 	const openDropdown = useCallback(() => {
-		if (withinGroup) return;
 		clearTimeouts();
-		if (settings.openDelay === 0 || settings.openDelay === void 0) onChange(true);
+		if (!settings.openDelay) onChange(true);
 		else openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);
 	}, [
-		withinGroup,
 		clearTimeouts,
 		settings.openDelay,
 		onChange
 	]);
 	const closeDropdown = useCallback(() => {
-		if (withinGroup) return;
 		clearTimeouts();
-		if (settings.closeDelay === 0 || settings.closeDelay === void 0) onChange(false);
+		if (!settings.closeDelay) onChange(false);
 		else closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);
 	}, [
-		withinGroup,
 		clearTimeouts,
 		settings.closeDelay,
 		onChange
@@ -90,6 +103,7 @@ function useHoverCard(settings) {
 	]);
 	return {
 		opened,
+		dropdownId: `${uid}-dropdown`,
 		reference: refs.setReference,
 		floating: refs.setFloating,
 		assignTarget,

package/esm/components/HoverCard/use-hover-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useHover,\n  useInteractions,\n  useRole,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n  openDelay?: number;\n  closeDelay?: number;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(HoverCardGroupContext).withinGroup;\n  const uid = useId();\n\n  const openTimeout = useRef(-1);\n  const closeTimeout = useRef(-1);\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const assignTarget = useCallback((node: HTMLElement | null) => {\n    targetRef.current = node;\n  }, []);\n\n  const clearTimeouts = useCallback(() => {\n    window.clearTimeout(openTimeout.current);\n    window.clearTimeout(closeTimeout.current);\n  }, []);\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n        settings.onOpen?.();\n      } else {\n        settings.onClose?.();\n      }\n    },\n    [uid, settings.onOpen, settings.onClose]\n  );\n\n  const { context, refs } = useFloating({\n    open: opened,\n    onOpenChange: onChange,\n  });\n\n  const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: true,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n    }),\n    useRole(context, { role: 'dialog' }),\n    useDismiss(context, { enabled: withinGroup }),\n  ]);\n\n  const openDropdown = useCallback(() => {\n    if (withinGroup) {\n      return; // Group mode handles this automatically\n    }\n\n    clearTimeouts();\n    if (settings.openDelay === 0 || settings.openDelay === undefined) {\n      onChange(true);\n    } else {\n      openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n    }\n  }, [withinGroup, clearTimeouts, settings.openDelay, onChange]);\n\n  const closeDropdown = useCallback(() => {\n    if (withinGroup) {\n      return; // Group mode handles this automatically\n    }\n\n    clearTimeouts();\n    if (settings.closeDelay === 0 || settings.closeDelay === undefined) {\n      onChange(false);\n    } else {\n      closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n    }\n  }, [withinGroup, clearTimeouts, settings.closeDelay, onChange]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n  useEffect(() => {\n    if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n      return undefined;\n    }\n\n    const node = targetRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new IntersectionObserver(() => {\n      if (!node.isConnected || node.getClientRects().length === 0) {\n        clearTimeouts();\n        onChangeRef.current(false);\n      }\n    });\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [opened, withinGroup, clearTimeouts]);\n\n  return {\n    opened,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    assignTarget,\n    getReferenceProps,\n    getFloatingProps,\n    openDropdown,\n    closeDropdown,\n  };\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,aAAa,UAAwB;CACnD,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,qBAAqB,CAAC,CAAC;CAC/C,MAAM,MAAMA,QAAM;CAElB,MAAM,cAAc,OAAO,EAAE;CAC7B,MAAM,eAAe,OAAO,EAAE;CAC9B,MAAM,YAAY,OAA2B,IAAI;CAEjD,MAAM,eAAe,aAAa,SAA6B;EAC7D,UAAU,UAAU;CACtB,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,kBAAkB;EACtC,OAAO,aAAa,YAAY,OAAO;EACvC,OAAO,aAAa,aAAa,OAAO;CAC1C,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SAAS;GACX,aAAa,GAAG;GAChB,SAAS,SAAS;EACpB,OACE,SAAS,UAAU;CAEvB,GACA;EAAC;EAAK,SAAS;EAAQ,SAAS;CAAO,CACzC;CAEA,MAAM,EAAE,SAAS,SAAS,YAAY;EACpC,MAAM;EACN,cAAc;CAChB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAE9E,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS;GACT,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;EAC3F,CAAC;EACD,QAAQ,SAAS,EAAE,MAAM,SAAS,CAAC;EACnC,WAAW,SAAS,EAAE,SAAS,YAAY,CAAC;CAC9C,CAAC;CAED,MAAM,eAAe,kBAAkB;EACrC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,cAAc,KAAK,SAAS,cAAc,KAAA,GACrD,SAAS,IAAI;OAEb,YAAY,UAAU,OAAO,iBAAiB,SAAS,IAAI,GAAG,SAAS,SAAS;CAEpF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAW;CAAQ,CAAC;CAE7D,MAAM,gBAAgB,kBAAkB;EACtC,IAAI,aACF;EAGF,cAAc;EACd,IAAI,SAAS,eAAe,KAAK,SAAS,eAAe,KAAA,GACvD,SAAS,KAAK;OAEd,aAAa,UAAU,OAAO,iBAAiB,SAAS,KAAK,GAAG,SAAS,UAAU;CAEvF,GAAG;EAAC;EAAa;EAAe,SAAS;EAAY;CAAQ,CAAC;CAE9D,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,sBAAsB,cAAc,GAAG,CAAC,aAAa,CAAC;CAEtD,gBAAgB;EACd,IAAI,CAAC,UAAU,eAAe,OAAO,yBAAyB,aAC5D;EAGF,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,2BAA2B;GAC9C,IAAI,CAAC,KAAK,eAAe,KAAK,eAAe,CAAC,CAAC,WAAW,GAAG;IAC3D,cAAc;IACd,YAAY,QAAQ,KAAK;GAC3B;EACF,CAAC;EAED,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAQ;EAAa;CAAa,CAAC;CAEvC,OAAO;EACL;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-hover-card.mjs","names":["useId"],"sources":["../../../src/components/HoverCard/use-hover-card.ts"],"sourcesContent":["import { use, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  OpenChangeReason,\n  safePolygon,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n} from '@floating-ui/react';\nimport { useId } from '@mantine/hooks';\nimport { HoverCardGroupContext } from './HoverCardGroup/HoverCardGroup';\n\ninterface UseHoverCard {\n  openDelay?: number;\n  closeDelay?: number;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  onOpen?: () => void;\n  onClose?: () => void;\n  events: { hover: boolean; focus: boolean; touch: boolean };\n  interactive: boolean;\n  closeOnEscape: boolean;\n  closeOnClickOutside: boolean;\n  onDismiss?: () => void;\n  id?: string;\n}\n\nexport function useHoverCard(settings: UseHoverCard) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(HoverCardGroupContext).withinGroup;\n  const uid = useId(settings.id);\n\n  const openedRef = useRef(opened);\n  openedRef.current = opened;\n\n  const openTimeout = useRef(-1);\n  const closeTimeout = useRef(-1);\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const assignTarget = useCallback((node: HTMLElement | null) => {\n    targetRef.current = node;\n  }, []);\n\n  const clearTimeouts = useCallback(() => {\n    window.clearTimeout(openTimeout.current);\n    window.clearTimeout(closeTimeout.current);\n  }, []);\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      if (openedRef.current === _opened) {\n        return;\n      }\n\n      openedRef.current = _opened;\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n        settings.onOpen?.();\n      } else {\n        settings.onClose?.();\n      }\n    },\n    [uid, settings.onOpen, settings.onClose]\n  );\n\n  const onOpenChange = useCallback(\n    (_opened: boolean, _event?: Event, reason?: OpenChangeReason) => {\n      const wasOpened = openedRef.current;\n      onChange(_opened);\n\n      if (wasOpened && !_opened && (reason === 'escape-key' || reason === 'outside-press')) {\n        settings.onDismiss?.();\n      }\n    },\n    [onChange, settings.onDismiss]\n  );\n\n  const { context, refs } = useFloating({\n    open: opened,\n    onOpenChange,\n  });\n\n  const { delay: groupDelay, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events.focus, visibleOnly: true }),\n    useDismiss(context, {\n      escapeKey: settings.closeOnEscape,\n      outsidePress: settings.closeOnClickOutside,\n    }),\n  ]);\n\n  const openDropdown = useCallback(() => {\n    clearTimeouts();\n    if (!settings.openDelay) {\n      onChange(true);\n    } else {\n      openTimeout.current = window.setTimeout(() => onChange(true), settings.openDelay);\n    }\n  }, [clearTimeouts, settings.openDelay, onChange]);\n\n  const closeDropdown = useCallback(() => {\n    clearTimeouts();\n    if (!settings.closeDelay) {\n      onChange(false);\n    } else {\n      closeTimeout.current = window.setTimeout(() => onChange(false), settings.closeDelay);\n    }\n  }, [clearTimeouts, settings.closeDelay, onChange]);\n\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => () => clearTimeouts(), [clearTimeouts]);\n\n  useEffect(() => {\n    if (!opened || withinGroup || typeof IntersectionObserver === 'undefined') {\n      return undefined;\n    }\n\n    const node = targetRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new IntersectionObserver(() => {\n      if (!node.isConnected || node.getClientRects().length === 0) {\n        clearTimeouts();\n        onChangeRef.current(false);\n      }\n    });\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [opened, withinGroup, clearTimeouts]);\n\n  return {\n    opened,\n    dropdownId: `${uid}-dropdown`,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    assignTarget,\n    getReferenceProps,\n    getFloatingProps,\n    openDropdown,\n    closeDropdown,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Radio/Radio.mjs

@@ -30,11 +30,19 @@ const varsResolver = createVarsResolver((theme, { size, radius, color, iconColor
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : getThemeColor(color, theme);
 	return { root: {
 		"--radio-size": getSize(size, "radio-size"),
 		"--radio-radius": radius === void 0 ? void 0 : getRadius(radius),
-		"--radio-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
-		"--radio-icon-color": iconColor ? getThemeColor(iconColor, theme) : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
+		"--radio-color": resolvedColor,
+		"--radio-bg": lightColors?.background,
+		"--radio-icon-color": iconColor ? getThemeColor(iconColor, theme) : lightColors ? lightColors.color : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
 			color,
 			theme,
 			autoContrast

package/esm/components/Radio/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\nexport type RadioVariant = 'filled' | 'outline';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n          aria-describedby={describedBy}\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Radio.mjs","names":["useId","classes"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  extractStyleProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n  RadioCard,\n  type RadioCardProps,\n  type RadioCardStylesNames,\n  type RadioCardFactory,\n  type RadioCardCssVariables,\n  type RadioCardContextValue,\n} from './RadioCard/RadioCard';\nimport {\n  RadioGroup,\n  RadioGroupContext,\n  type RadioGroupProps,\n  type RadioGroupStylesNames,\n  type RadioGroupFactory,\n  type RadioGroupContextValue,\n} from './RadioGroup/RadioGroup';\nimport { RadioIcon, RadioIconProps } from './RadioIcon';\nimport {\n  RadioIndicator,\n  type RadioIndicatorProps,\n  type RadioIndicatorStylesNames,\n  type RadioIndicatorFactory,\n  type RadioIndicatorCssVariables,\n  type RadioIndicatorVariant,\n} from './RadioIndicator/RadioIndicator';\nimport classes from './Radio.module.css';\n\nexport type RadioVariant = 'filled' | 'outline' | 'light';\nexport type RadioStylesNames = InlineInputStylesNames | 'inner' | 'radio' | 'icon';\nexport type RadioCssVariables = {\n  root:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size'\n    | '--radio-bg';\n};\n\nexport interface RadioProps\n  extends BoxProps, StylesApiProps<RadioFactory>, ElementProps<'input', 'size' | 'children'> {\n  /** Content of the `label` associated with the radio */\n  label?: React.ReactNode;\n\n  /** Key of theme.colors or any valid CSS color to set radio background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Props passed down to the root element */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Position of the label relative to the input @default 'right' */\n  labelPosition?: 'left' | 'right';\n\n  /** Description displayed below the label */\n  description?: React.ReactNode;\n\n  /** Error displayed below the label */\n  error?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' */\n  radius?: MantineRadius;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** If set, applies error styles to the radio when `error` prop is set @default true */\n  withErrorStyles?: boolean;\n}\n\nexport type RadioFactory = Factory<{\n  props: RadioProps;\n  ref: HTMLInputElement;\n  stylesNames: RadioStylesNames;\n  vars: RadioCssVariables;\n  variant: RadioVariant;\n  staticComponents: {\n    Group: typeof RadioGroup;\n    Card: typeof RadioCard;\n    Indicator: typeof RadioIndicator;\n  };\n}>;\n\nconst defaultProps = {\n  labelPosition: 'right',\n  withErrorStyles: true,\n} satisfies Partial<RadioProps>;\n\nconst varsResolver = createVarsResolver<RadioFactory>(\n  (theme, { size, radius, color, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    const lightColors =\n      variant === 'light'\n        ? theme.variantColorResolver({\n            color: color || theme.primaryColor,\n            theme,\n            variant: 'light',\n            autoContrast,\n          })\n        : undefined;\n\n    const resolvedColor =\n      variant === 'outline'\n        ? outlineColor\n        : lightColors\n          ? lightColors.color\n          : getThemeColor(color, theme);\n\n    return {\n      root: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': resolvedColor,\n        '--radio-bg': lightColors?.background,\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : lightColors\n            ? lightColors.color\n            : getAutoContrastValue(autoContrast, theme)\n              ? getContrastColor({ color, theme, autoContrast })\n              : undefined,\n        '--radio-icon-size': getSize(size, 'radio-icon-size'),\n      },\n    };\n  }\n);\n\nexport const Radio = factory<RadioFactory>((_props) => {\n  const props = useProps('Radio', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    id,\n    size,\n    label,\n    labelPosition,\n    description,\n    error,\n    radius,\n    color,\n    variant,\n    disabled,\n    wrapperProps,\n    icon: Icon = RadioIcon,\n    rootRef,\n    iconColor,\n    onChange,\n    mod,\n    attributes,\n    withErrorStyles,\n    checked,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioFactory>({\n    name: 'Radio',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const ctx = use(RadioGroupContext);\n\n  const contextSize = ctx?.size ?? size;\n  const componentSize = props.size ? size : contextSize;\n\n  const { styleProps, rest } = extractStyleProps(others);\n  const uuid = useId(id);\n  const descriptionId = description ? `${uuid}-description` : undefined;\n  const errorId = error && typeof error !== 'boolean' ? `${uuid}-error` : undefined;\n  const describedBy =\n    [descriptionId, errorId, rest['aria-describedby']].filter(Boolean).join(' ') || undefined;\n\n  const contextChecked = ctx ? ctx.value === rest.value : undefined;\n\n  const withContextProps = {\n    checked: contextChecked ?? checked,\n    name: rest.name ?? ctx?.name,\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      ctx?.onChange(event);\n      onChange?.(event);\n    },\n    disabled: ctx?.disabled ?? disabled,\n  };\n\n  return (\n    <InlineInput\n      {...getStyles('root')}\n      __staticSelector=\"Radio\"\n      __stylesApiProps={props}\n      id={uuid}\n      size={componentSize}\n      labelPosition={labelPosition}\n      label={label}\n      description={description}\n      error={error}\n      disabled={withContextProps.disabled}\n      classNames={classNames}\n      styles={styles}\n      unstyled={unstyled}\n      data-checked={(contextChecked ?? checked) || undefined}\n      variant={variant}\n      ref={rootRef}\n      mod={mod}\n      attributes={attributes}\n      {...styleProps}\n      {...wrapperProps}\n    >\n      <Box {...getStyles('inner')} mod={{ 'label-position': labelPosition }}>\n        <Box\n          {...getStyles('radio', { focusable: true, variant })}\n          {...rest}\n          {...withContextProps}\n          component=\"input\"\n          mod={{ error: !!error, 'with-error-styles': withErrorStyles }}\n          id={uuid}\n          type=\"radio\"\n          aria-describedby={describedBy}\n        />\n        <Icon {...getStyles('icon')} aria-hidden />\n      </Box>\n    </InlineInput>\n  );\n});\n\nRadio.classes = classes;\nRadio.varsResolver = varsResolver;\nRadio.displayName = '@mantine/core/Radio';\nRadio.Group = RadioGroup;\nRadio.Card = RadioCard;\nRadio.Indicator = RadioIndicator;\n\nexport namespace Radio {\n  export type Props = RadioProps;\n  export type StylesNames = RadioStylesNames;\n  export type Factory = RadioFactory;\n  export type Variant = RadioVariant;\n\n  export namespace Group {\n    export type Props = RadioGroupProps;\n    export type StylesNames = RadioGroupStylesNames;\n    export type Factory = RadioGroupFactory;\n    export type ContextValue = RadioGroupContextValue;\n  }\n\n  export namespace Card {\n    export type Props = RadioCardProps;\n    export type StylesNames = RadioCardStylesNames;\n    export type Factory = RadioCardFactory;\n    export type CssVariables = RadioCardCssVariables;\n    export type ContextValue = RadioCardContextValue;\n  }\n\n  export namespace Indicator {\n    export type Props = RadioIndicatorProps;\n    export type StylesNames = RadioIndicatorStylesNames;\n    export type Factory = RadioIndicatorFactory;\n    export type CssVariables = RadioIndicatorCssVariables;\n    export type Variant = RadioIndicatorVariant;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Radio/Radio.module.mjs

@@ -5,6 +5,7 @@ var Radio_module_default = {
 	"inner": "m_89c4f5e4",
 	"icon": "m_f3ed6b2b",
 	"radio": "m_8a3dbb89",
+	"radio--light": "m_99d09bcd",
 	"radio--outline": "m_1bfe9d39"
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.module.mjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  translate: -50% -50%;\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Radio.module.mjs","names":[],"sources":["../../../src/components/Radio/Radio.module.css"],"sourcesContent":[".root {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n  --radio-size: var(--radio-size-sm);\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-icon-color: var(--mantine-color-white);\n}\n\n.inner {\n  position: relative;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.icon {\n  color: var(--radio-icon-color);\n  opacity: var(--radio-icon-opacity, 0);\n  translate: -50% -50%;\n  transform: var(--radio-icon-transform, scale(0.2) translateY(rem(10px)));\n  transition:\n    opacity 100ms ease,\n    transform 200ms ease;\n  pointer-events: none;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  position: absolute;\n  top: 50%;\n  left: 50%;\n}\n\n.radio {\n  border: 1px solid;\n  position: relative;\n  appearance: none;\n  width: var(--radio-size);\n  height: var(--radio-size);\n  border-radius: var(--radio-radius, var(--radio-size));\n  margin: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: background-color, border-color;\n  transition-timing-function: ease;\n  transition-duration: 100ms;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:checked {\n    background-color: var(--radio-color, var(--mantine-primary-color-filled));\n    border-color: var(--radio-color, var(--mantine-primary-color-filled));\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: scale(1);\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    & + .icon {\n      --radio-icon-color: var(--mantine-color-disabled-color);\n    }\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n}\n\n.radio--light {\n  &:checked:not(:disabled) {\n    background-color: var(--radio-bg);\n    border-color: transparent;\n\n    & + .icon {\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n\n.radio--outline {\n  & + .icon {\n    --radio-icon-color: var(--radio-color);\n  }\n\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & + .icon {\n      --radio-icon-color: var(--radio-color);\n      --radio-icon-opacity: 1;\n      --radio-icon-transform: none;\n    }\n  }\n}\n"],"mappings":""}

package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs

@@ -22,12 +22,20 @@ const varsResolver = createVarsResolver((theme, { radius, color, size, iconColor
 		theme
 	});
 	const outlineColor = parsedColor.isThemeColor && parsedColor.shade === void 0 ? `var(--mantine-color-${parsedColor.color}-outline)` : parsedColor.color;
+	const lightColors = variant === "light" ? theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: "light",
+		autoContrast
+	}) : void 0;
+	const resolvedColor = variant === "outline" ? outlineColor : lightColors ? lightColors.color : getThemeColor(color, theme);
 	return { indicator: {
 		"--radio-size": getSize(size, "radio-size"),
 		"--radio-radius": radius === void 0 ? void 0 : getRadius(radius),
-		"--radio-color": variant === "outline" ? outlineColor : getThemeColor(color, theme),
+		"--radio-color": resolvedColor,
+		"--radio-bg": lightColors?.background,
 		"--radio-icon-size": typeof size === "number" ? `calc(${getSize(size, "radio-size")} * 0.4)` : getSize(size, "radio-icon-size"),
-		"--radio-icon-color": iconColor ? getThemeColor(iconColor, theme) : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
+		"--radio-icon-color": iconColor ? getThemeColor(iconColor, theme) : lightColors ? lightColors.color : getAutoContrastValue(autoContrast, theme) ? getContrastColor({
 			color,
 			theme,
 			autoContrast

package/esm/components/Radio/RadioIndicator/RadioIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' | 'icon';\nexport type RadioIndicatorVariant = 'filled' | 'outline';\nexport type RadioIndicatorCssVariables = {\n  indicator:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size';\n};\n\nexport interface RadioIndicatorProps\n  extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n  /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Checked state */\n  checked?: boolean;\n\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n  props: RadioIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: RadioIndicatorStylesNames;\n  vars: RadioIndicatorCssVariables;\n  variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    return {\n      indicator: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n        '--radio-icon-size':\n          typeof size === 'number'\n            ? `calc(${getSize(size, 'radio-size')} * 0.4)`\n            : getSize(size, 'radio-icon-size'),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : getAutoContrastValue(autoContrast, theme)\n            ? getContrastColor({ color, theme, autoContrast })\n            : undefined,\n      },\n    };\n  }\n);\n\nexport const RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n  const props = useProps('RadioIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioIndicatorFactory>({\n    name: 'RadioIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(RadioCardContext);\n  const _checked = typeof checked === 'boolean' ? checked : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuEA,MAAM,eAAe,EACnB,MAAM,UACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,gBAAgB,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,iBAAiB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EAClF,qBACE,OAAO,SAAS,WACZ,QAAQ,QAAQ,MAAM,YAAY,EAAE,WACpC,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,YAClB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,GAAI,UAAU,MAAM,EAAI,CAAA;CAC3B,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe"}
+{"version":3,"file":"RadioIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  parseThemeColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { RadioCardContext } from '../RadioCard/RadioCard';\nimport { RadioIcon, RadioIconProps } from '../RadioIcon';\nimport classes from './RadioIndicator.module.css';\n\nexport type RadioIndicatorStylesNames = 'indicator' | 'icon';\nexport type RadioIndicatorVariant = 'filled' | 'outline' | 'light';\nexport type RadioIndicatorCssVariables = {\n  indicator:\n    | '--radio-size'\n    | '--radio-radius'\n    | '--radio-color'\n    | '--radio-icon-color'\n    | '--radio-icon-size'\n    | '--radio-bg';\n};\n\nexport interface RadioIndicatorProps\n  extends BoxProps, StylesApiProps<RadioIndicatorFactory>, ElementProps<'div'> {\n  /** Key of theme.colors or any valid CSS color to set indicator background color in checked state @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Controls size of the component @default 'sm' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of theme.colors or any valid CSS color to set icon color. When not set, icon color is determined automatically based on theme.autoContrast setting */\n  iconColor?: MantineColor;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** A component that replaces the default radio icon (centered dot) */\n  icon?: React.FC<RadioIconProps>;\n\n  /** Checked state */\n  checked?: boolean;\n\n  /** Disabled state */\n  disabled?: boolean;\n}\n\nexport type RadioIndicatorFactory = Factory<{\n  props: RadioIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: RadioIndicatorStylesNames;\n  vars: RadioIndicatorCssVariables;\n  variant: RadioIndicatorVariant;\n}>;\n\nconst defaultProps = {\n  icon: RadioIcon,\n} satisfies Partial<RadioIndicatorProps>;\n\nconst varsResolver = createVarsResolver<RadioIndicatorFactory>(\n  (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n    const parsedColor = parseThemeColor({ color: color || theme.primaryColor, theme });\n    const outlineColor =\n      parsedColor.isThemeColor && parsedColor.shade === undefined\n        ? `var(--mantine-color-${parsedColor.color}-outline)`\n        : parsedColor.color;\n\n    const lightColors =\n      variant === 'light'\n        ? theme.variantColorResolver({\n            color: color || theme.primaryColor,\n            theme,\n            variant: 'light',\n            autoContrast,\n          })\n        : undefined;\n\n    const resolvedColor =\n      variant === 'outline'\n        ? outlineColor\n        : lightColors\n          ? lightColors.color\n          : getThemeColor(color, theme);\n\n    return {\n      indicator: {\n        '--radio-size': getSize(size, 'radio-size'),\n        '--radio-radius': radius === undefined ? undefined : getRadius(radius),\n        '--radio-color': resolvedColor,\n        '--radio-bg': lightColors?.background,\n        '--radio-icon-size':\n          typeof size === 'number'\n            ? `calc(${getSize(size, 'radio-size')} * 0.4)`\n            : getSize(size, 'radio-icon-size'),\n        '--radio-icon-color': iconColor\n          ? getThemeColor(iconColor, theme)\n          : lightColors\n            ? lightColors.color\n            : getAutoContrastValue(autoContrast, theme)\n              ? getContrastColor({ color, theme, autoContrast })\n              : undefined,\n      },\n    };\n  }\n);\n\nexport const RadioIndicator = factory<RadioIndicatorFactory>((_props) => {\n  const props = useProps('RadioIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    icon: Icon,\n    radius,\n    color,\n    iconColor,\n    autoContrast,\n    checked,\n    mod,\n    variant,\n    disabled,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<RadioIndicatorFactory>({\n    name: 'RadioIndicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'indicator',\n  });\n\n  const ctx = use(RadioCardContext);\n  const _checked = typeof checked === 'boolean' ? checked : ctx?.checked || false;\n\n  return (\n    <Box\n      {...getStyles('indicator', { variant })}\n      variant={variant}\n      mod={[{ checked: _checked, disabled }, mod]}\n      {...others}\n    >\n      <Icon {...getStyles('icon')} />\n    </Box>\n  );\n});\n\nRadioIndicator.displayName = '@mantine/core/RadioIndicator';\nRadioIndicator.classes = classes;\nRadioIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe,EACnB,MAAM,UACR;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,MAAM,cACJ,YAAY,UACR,MAAM,qBAAqB;EACzB,OAAO,SAAS,MAAM;EACtB;EACA,SAAS;EACT;CACF,CAAC,IACD,KAAA;CAEN,MAAM,gBACJ,YAAY,YACR,eACA,cACE,YAAY,QACZ,cAAc,OAAO,KAAK;CAElC,OAAO,EACL,WAAW;EACT,gBAAgB,QAAQ,MAAM,YAAY;EAC1C,kBAAkB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACrE,iBAAiB;EACjB,cAAc,aAAa;EAC3B,qBACE,OAAO,SAAS,WACZ,QAAQ,QAAQ,MAAM,YAAY,EAAE,WACpC,QAAQ,MAAM,iBAAiB;EACrC,sBAAsB,YAClB,cAAc,WAAW,KAAK,IAC9B,cACE,YAAY,QACZ,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACV,EACF;AACF,CACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,gBAAgB;CAChC,MAAM,WAAW,OAAO,YAAY,YAAY,UAAU,KAAK,WAAW;CAE1E,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;EAEJ,UAAA,oBAAC,MAAD,EAAM,GAAI,UAAU,MAAM,EAAI,CAAA;CAC3B,CAAA;AAET,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA;AACzB,eAAe,eAAe"}

package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs

@@ -3,6 +3,7 @@
 var RadioIndicator_module_default = {
 	"indicator": "m_717d7ff6",
 	"icon": "m_3e4da632",
+	"indicator--light": "m_7eec72c0",
 	"indicator--outline": "m_2980836c"
 };
 //#endregion

package/esm/components/Radio/RadioIndicator/RadioIndicator.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIndicator.module.mjs","names":[],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.module.css"],"sourcesContent":[".indicator {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-size: var(--radio-size-sm);\n  --radio-color: var(--mantine-primary-color-filled);\n  --radio-icon-color: var(--mantine-color-white);\n\n  position: relative;\n  border: 1px solid transparent;\n  width: var(--radio-size);\n  min-width: var(--radio-size);\n  height: var(--radio-size);\n  min-height: var(--radio-size);\n  border-radius: var(--radio-radius, 10000px);\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &[data-checked] {\n    background-color: var(--radio-color);\n    border-color: var(--radio-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--radio-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    &[data-checked] > .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-checked]:not([data-disabled]) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & > .icon {\n      color: var(--radio-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  display: block;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  color: transparent;\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 1;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}
+{"version":3,"file":"RadioIndicator.module.mjs","names":[],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.module.css"],"sourcesContent":[".indicator {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-size: var(--radio-size-sm);\n  --radio-color: var(--mantine-primary-color-filled);\n  --radio-icon-color: var(--mantine-color-white);\n\n  position: relative;\n  border: 1px solid transparent;\n  width: var(--radio-size);\n  min-width: var(--radio-size);\n  height: var(--radio-size);\n  min-height: var(--radio-size);\n  border-radius: var(--radio-radius, 10000px);\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &[data-checked] {\n    background-color: var(--radio-color);\n    border-color: var(--radio-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--radio-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    &[data-checked] > .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.indicator--light {\n  &[data-checked]:not([data-disabled]) {\n    background-color: var(--radio-bg);\n    border-color: transparent;\n\n    & > .icon {\n      color: var(--radio-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-checked]:not([data-disabled]) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & > .icon {\n      color: var(--radio-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  display: block;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\n  color: transparent;\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 1;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}

package/esm/components/Toggle/Toggle.mjs

@@ -0,0 +1,80 @@
+"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 { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
+import Toggle_module_default from "./Toggle.module.mjs";
+import { useUncontrolled } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toggle/Toggle.tsx
+const defaultProps = { 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: {
+		"--toggle-size": size !== void 0 ? getSize(size, "toggle-size") : void 0,
+		"--toggle-radius": radius !== void 0 ? getRadius(radius) : void 0,
+		"--toggle-active-bg": color || variant ? activeColors.background : void 0,
+		"--toggle-active-hover": color || variant ? activeColors.hover : void 0,
+		"--toggle-active-color": color || variant ? activeColors.color : void 0
+	} };
+});
+const Toggle = polymorphicFactory((_props) => {
+	const props = useProps("Toggle", defaultProps, _props);
+	const { className, style, classNames, styles, unstyled, vars, active, defaultActive, onActiveChange, disabled, size, radius, autoWidth, color, autoContrast, children, component, onClick, tabIndex, attributes, ...others } = props;
+	const [_active, handleActiveChange] = useUncontrolled({
+		value: active,
+		defaultValue: defaultActive,
+		finalValue: false,
+		onChange: onActiveChange
+	});
+	const getStyles = useStyles({
+		name: "Toggle",
+		classes: Toggle_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ jsx(Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...getStyles("root", { focusable: 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 : tabIndex,
+		size,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			handleActiveChange(!_active);
+			onClick?.(event);
+		},
+		children
+	});
+});
+Toggle.classes = Toggle_module_default;
+Toggle.varsResolver = varsResolver;
+Toggle.displayName = "@mantine/core/Toggle";
+//#endregion
+export { Toggle };
+
+//# sourceMappingURL=Toggle.mjs.map

package/esm/components/Toggle/Toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.mjs","names":["classes"],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Toggle.module.css';\n\nexport type ToggleStylesNames = 'root';\nexport type ToggleVariant = 'light' | 'filled';\n\nexport type ToggleCssVariables = {\n  root:\n    | '--toggle-size'\n    | '--toggle-radius'\n    | '--toggle-active-bg'\n    | '--toggle-active-hover'\n    | '--toggle-active-color';\n};\n\nexport interface ToggleProps\n  extends BoxProps, StylesApiProps<ToggleFactory>, ElementProps<'button'> {\n  /** Controlled active state */\n  active?: boolean;\n\n  /** Uncontrolled default active state */\n  defaultActive?: boolean;\n\n  /** Called when active state changes */\n  onActiveChange?: (active: boolean) => void;\n\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** Controls toggle height and min-width, `'md'` by default */\n  size?: MantineSize | (string & {});\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, `theme.defaultRadius` by default */\n  radius?: MantineRadius;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color, `theme.primaryColor` by default */\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\nexport type ToggleFactory = PolymorphicFactory<{\n  props: ToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToggleStylesNames;\n  vars: ToggleCssVariables;\n  variant: ToggleVariant;\n}>;\n\nconst defaultProps = {\n  variant: 'filled',\n} satisfies Partial<ToggleProps>;\n\nconst varsResolver = createVarsResolver<ToggleFactory>(\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        '--toggle-size': size !== undefined ? getSize(size, 'toggle-size') : undefined,\n        '--toggle-radius': radius !== undefined ? getRadius(radius) : undefined,\n        '--toggle-active-bg': color || variant ? activeColors.background : undefined,\n        '--toggle-active-hover': color || variant ? activeColors.hover : undefined,\n        '--toggle-active-color': color || variant ? activeColors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Toggle = polymorphicFactory<ToggleFactory>((_props) => {\n  const props = useProps('Toggle', defaultProps, _props);\n  const {\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    active,\n    defaultActive,\n    onActiveChange,\n    disabled,\n    size,\n    radius,\n    autoWidth,\n    color,\n    autoContrast,\n    children,\n    component,\n    onClick,\n    tabIndex,\n    attributes,\n    ...others\n  } = props as typeof props & { component?: any };\n\n  const [_active, handleActiveChange] = useUncontrolled({\n    value: active,\n    defaultValue: defaultActive,\n    finalValue: false,\n    onChange: onActiveChange,\n  });\n\n  const getStyles = useStyles<ToggleFactory>({\n    name: 'Toggle',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      component={component || 'button'}\n      type={!component || component === 'button' ? 'button' : undefined}\n      {...others}\n      {...getStyles('root', { focusable: true })}\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 : tabIndex}\n      size={size}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          event.preventDefault();\n          return;\n        }\n        handleActiveChange(!_active);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToggle.classes = classes;\nToggle.varsResolver = varsResolver;\nToggle.displayName = '@mantine/core/Toggle';\n"],"mappings":";;;;;;;;;;;AAsEA,MAAM,eAAe,EACnB,SAAS,SACX;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;EACJ,iBAAiB,SAAS,KAAA,IAAY,QAAQ,MAAM,aAAa,IAAI,KAAA;EACrE,mBAAmB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;EAC9D,sBAAsB,SAAS,UAAU,aAAa,aAAa,KAAA;EACnE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;EACjE,yBAAyB,SAAS,UAAU,aAAa,QAAQ,KAAA;CACnE,EACF;AACF,CACF;AAEA,MAAa,SAAS,oBAAmC,WAAW;CAClE,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,WACA,OACA,YACA,QACA,UACA,MACA,QACA,eACA,gBACA,UACA,MACA,QACA,WACA,OACA,cACA,UACA,WACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,CAAC,SAAS,sBAAsB,gBAAgB;EACpD,OAAO;EACP,cAAc;EACd,YAAY;EACZ,UAAU;CACZ,CAAC;CAED,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,eAAa,WAAW,KAAA;EACxB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EACpB;EACN,UAAU,UAA+C;GACvD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,mBAAmB,CAAC,OAAO;GAC3B,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

package/esm/components/Toggle/Toggle.module.mjs

@@ -0,0 +1,7 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toggle/Toggle.module.css
+var Toggle_module_default = { "root": "m_ba2e839b" };
+//#endregion
+export { Toggle_module_default as default };
+
+//# sourceMappingURL=Toggle.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.mjs","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".root {\n  --toggle-size-xs: 22px;\n  --toggle-size-sm: 26px;\n  --toggle-size-md: 30px;\n  --toggle-size-lg: 36px;\n  --toggle-size-xl: 42px;\n\n  --toggle-size: var(--toggle-size-md);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: var(--toggle-radius, var(--mantine-radius-default));\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(--toggle-size);\n  min-width: var(--toggle-size);\n  height: var(--toggle-size);\n  padding: calc(var(--toggle-size) / 5);\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--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(--toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--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(--toggle-active-hover, var(--mantine-primary-color-light-hover));\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"],"mappings":""}

package/esm/components/Toolbar/Toolbar.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/Toolbar.context.ts
+const [ToolbarProvider, useToolbarContext] = createSafeContext("Toolbar component was not found in tree");
+//#endregion
+export { ToolbarProvider, useToolbarContext };
+
+//# sourceMappingURL=Toolbar.context.mjs.map