npm - @mantine/core - Versions diffs - 9.3.2 → 9.4.1 - Mend

@mantine/core 9.3.2 → 9.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (843) hide show

package/esm/components/Slider/Slider.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n\n &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-rtl {\n transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n }\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}

package/esm/components/Slider/utils/get-precision/get-precision.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-precision.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-precision/get-precision.ts"],"sourcesContent":["export function getPrecision(step: number) {\n if (!step) {\n return 0;\n }\n const split = step.toString().split('.');\n return split.length > 1 ? split[1].length : 0;\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,MAAc;CACzC,IAAI,CAAC,MACH,OAAO;CAET,MAAM,QAAQ,KAAK,SAAS,~~EAAE~~,MAAM,GAAG;CACvC,OAAO,MAAM,SAAS,IAAI,MAAM,~~GAAG~~,SAAS;AAC9C"}
1	+ {"version":3,"file":"get-precision.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-precision/get-precision.ts"],"sourcesContent":["export function getPrecision(step: number) {\n if (!step) {\n return 0;\n }\n const split = step.toString().split('.');\n return split.length > 1 ? split[1].length : 0;\n}\n"],"mappings":";;AAAA,SAAgB,aAAa,MAAc;CACzC,IAAI,CAAC,MACH,OAAO;CAET,MAAM,QAAQ,KAAK,SAAS,CAAC,CAAC,MAAM,GAAG;CACvC,OAAO,MAAM,SAAS,IAAI,MAAM,EAAE,CAAC,SAAS;AAC9C"}

package/esm/components/Slider/utils/get-step-mark-value/get-step-mark-value.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-step-mark-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-step-mark-value/get-step-mark-value.ts"],"sourcesContent":["export function getNextMarkValue(\n currentValue: number,\n marks: { value: number; label?: React.ReactNode }[]\n) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n const nextMark = sortedMarks.find((mark) => mark.value > currentValue);\n return nextMark ? nextMark.value : currentValue;\n}\n\nexport function getPreviousMarkValue(\n currentValue: number,\n marks: { value: number; label?: React.ReactNode }[]\n) {\n const sortedMarks = [...marks].sort((a, b) => b.value - a.value);\n const previousMark = sortedMarks.find((mark) => mark.value < currentValue);\n return previousMark ? previousMark.value : currentValue;\n}\n\nexport function getFirstMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n return sortedMarks.length > 0 ? sortedMarks[0].value : 0;\n}\n\nexport function getLastMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,OACA;CAEA,MAAM,WADc,CAAC,GAAG,KAAK,~~EAAE~~,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC/B,~~EAAE~~,MAAM,SAAS,KAAK,QAAQ,YAAY;CACrE,OAAO,WAAW,SAAS,QAAQ;AACrC;AAEA,SAAgB,qBACd,cACA,OACA;CAEA,MAAM,eADc,CAAC,GAAG,KAAK,~~EAAE~~,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC3B,~~EAAE~~,MAAM,SAAS,KAAK,QAAQ,YAAY;CACzE,OAAO,eAAe,aAAa,QAAQ;AAC7C;AAEA,SAAgB,kBAAkB,OAAqD;CACrF,MAAM,cAAc,CAAC,GAAG,KAAK,~~EAAE~~,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,~~GAAG~~,QAAQ;AACzD;AAEA,SAAgB,iBAAiB,OAAqD;CACpF,MAAM,cAAc,CAAC,GAAG,KAAK,~~EAAE~~,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,YAAY,SAAS,~~GAAG~~,QAAQ;AAC9E"}
1	+ {"version":3,"file":"get-step-mark-value.mjs","names":[],"sources":["../../../../../src/components/Slider/utils/get-step-mark-value/get-step-mark-value.ts"],"sourcesContent":["export function getNextMarkValue(\n currentValue: number,\n marks: { value: number; label?: React.ReactNode }[]\n) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n const nextMark = sortedMarks.find((mark) => mark.value > currentValue);\n return nextMark ? nextMark.value : currentValue;\n}\n\nexport function getPreviousMarkValue(\n currentValue: number,\n marks: { value: number; label?: React.ReactNode }[]\n) {\n const sortedMarks = [...marks].sort((a, b) => b.value - a.value);\n const previousMark = sortedMarks.find((mark) => mark.value < currentValue);\n return previousMark ? previousMark.value : currentValue;\n}\n\nexport function getFirstMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n return sortedMarks.length > 0 ? sortedMarks[0].value : 0;\n}\n\nexport function getLastMarkValue(marks: { value: number; label?: React.ReactNode }[]) {\n const sortedMarks = [...marks].sort((a, b) => a.value - b.value);\n return sortedMarks.length > 0 ? sortedMarks[sortedMarks.length - 1].value : 100;\n}\n"],"mappings":";;AAAA,SAAgB,iBACd,cACA,OACA;CAEA,MAAM,WADc,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC/B,CAAC,CAAC,MAAM,SAAS,KAAK,QAAQ,YAAY;CACrE,OAAO,WAAW,SAAS,QAAQ;AACrC;AAEA,SAAgB,qBACd,cACA,OACA;CAEA,MAAM,eADc,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAC3B,CAAC,CAAC,MAAM,SAAS,KAAK,QAAQ,YAAY;CACzE,OAAO,eAAe,aAAa,QAAQ;AAC7C;AAEA,SAAgB,kBAAkB,OAAqD;CACrF,MAAM,cAAc,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,EAAE,CAAC,QAAQ;AACzD;AAEA,SAAgB,iBAAiB,OAAqD;CACpF,MAAM,cAAc,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;CAC/D,OAAO,YAAY,SAAS,IAAI,YAAY,YAAY,SAAS,EAAE,CAAC,QAAQ;AAC9E"}

package/esm/components/Splitter/Splitter.context.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Splitter.context.mjs","names":[],"sources":["../../../src/components/Splitter/Splitter.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { SplitterFactory } from './Splitter';\n\nexport interface SplitterContextValue {\n getStyles: GetStylesApi<SplitterFactory>;\n sizes: ~~number~~[];\n collapsed: boolean[];\n orientation: 'horizontal' \| 'vertical';\n}\n\nexport const [SplitterProvider, useSplitterContext] = createSafeContext<SplitterContextValue>(\n 'Splitter component was not found in the tree'\n);\n"],"mappings":";;;~~AAUA~~,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,8CACF"}
1	+ {"version":3,"file":"Splitter.context.mjs","names":[],"sources":["../../../src/components/Splitter/Splitter.context.ts"],"sourcesContent":["import type { SplitterPaneSize } from '@mantine/hooks';\nimport { createSafeContext, GetStylesApi } from '../../core';\nimport type { SplitterFactory } from './Splitter';\n\nexport interface SplitterContextValue {\n getStyles: GetStylesApi<SplitterFactory>;\n sizes: SplitterPaneSize[];\n collapsed: boolean[];\n orientation: 'horizontal' \| 'vertical';\n getPaneStyle: (index: number) => React.CSSProperties;\n}\n\nexport const [SplitterProvider, useSplitterContext] = createSafeContext<SplitterContextValue>(\n 'Splitter component was not found in the tree'\n);\n"],"mappings":";;;AAYA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,8CACF"}

package/esm/components/Splitter/Splitter.mjs CHANGED Viewed

@@ -15,6 +15,25 @@ import { Children, cloneElement, createElement, useImperativeHandle } from "reac
 import { useMergedRef, useSplitter } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Splitter/Splitter.tsx
+const PX_RE = /^(-?[\d.]+)px$/;
+const REM_RE = /^(-?[\d.]+)rem$/;
+function isFixedPaneSize(size) {
+	return typeof size === "string" && (PX_RE.test(size) || REM_RE.test(size));
+}
+function getPaneFlexStyle(size, pixelMode) {
+	const magnitude = typeof size === "number" ? size : parseFloat(size);
+	if (!pixelMode) return { flexBasis: `${magnitude}%` };
+	if (isFixedPaneSize(size)) return {
+		flexGrow: 0,
+		flexShrink: 1,
+		flexBasis: size
+	};
+	return {
+		flexGrow: magnitude,
+		flexShrink: 1,
+		flexBasis: 0
+	};
+}
 const defaultProps = {
 	orientation: "horizontal",
 	lineSize: 2,
@@ -51,6 +70,7 @@ const Splitter = factory((_props) => {
 		resetOnDoubleClick
 	});
 	useImperativeHandle(splitterRef, () => splitter, [splitter]);
+	const getPaneStyle = (index) => getPaneFlexStyle(splitter.sizes[index], splitter.pixelMode);
 	const mergedRef = useMergedRef(ref, splitter.ref);
 	const getStyles = useStyles({
 		name: "Splitter",
@@ -92,7 +112,8 @@ const Splitter = factory((_props) => {
 			getStyles,
 			sizes: splitter.sizes,
 			collapsed: splitter.collapsed,
-			orientation
+			orientation,
+			getPaneStyle
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			ref: mergedRef,

package/esm/components/Splitter/Splitter.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Splitter.mjs","names":["classes"],"sources":["../../../src/components/Splitter/Splitter.tsx"],"sourcesContent":["import { Children, cloneElement, useImperativeHandle } from 'react';\nimport {\n useMergedRef,\n useSplitter,\n UseSplitterRedistributeFn,\n UseSplitterReturnValue,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { GripHorizontalIcon, GripVerticalIcon } from './GripIcon';\nimport { SplitterProvider } from './Splitter.context';\nimport {\n SplitterPane,\n SplitterPaneProps,\n SplitterPaneStylesNames,\n} from './SplitterPane/SplitterPane';\nimport classes from './Splitter.module.css';\n\nexport type SplitterStylesNames = 'root' \| 'handle' \| 'thumb' \| SplitterPaneStylesNames;\n\nexport type SplitterCssVariables = {\n root: '--splitter-line-size' \| '--splitter-handle-color';\n};\n\nexport interface SplitterProps\n extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {\n /** Layout direction @default 'horizontal' /\n orientation?: 'horizontal' \| 'vertical';\n\n /* Controlled sizes (~~percentages~~ ~~summing~~ to ~~100~~) /\n sizes?: ~~number~~[];\n\n /* Called during resize with updated sizes /\n onSizeChange?: (sizes: ~~number~~[]) => void;\n\n /* Called when drag starts /\n onResizeStart?: (handleIndex: number) => void;\n\n /* Called when drag ends /\n onResizeEnd?: (handleIndex: number, sizes: ~~number~~[]) => void;\n\n /* Called when a panel collapses or expands /\n onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;\n\n /* How to redistribute space when immediate neighbor is at its min/max /\n redistribute?: 'nearest' \| 'equal' \| UseSplitterRedistributeFn;\n\n /* Keyboard step size in percentage @default 1 /\n step?: ~~number~~;\n\n /* Shift+arrow step size in percentage @default 10 /\n shiftStep?: ~~number~~;\n\n /* CSS value for separator line thickness between panes @default 2 /\n lineSize?: number \| string;\n\n /* Key of `theme.colors` or any valid CSS color for the separator line /\n handleColor?: MantineColor;\n\n /* Custom icon displayed in the handle thumb, by default uses grip icon based on orientation /\n handleIcon?: React.ReactNode;\n\n /* Determines whether the thumb with grip icon is displayed on the handle @default true /\n withHandle?: boolean;\n\n /* Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true /\n resetOnDoubleClick?: boolean;\n\n /* Ref to imperative splitter API (sizes, collapse, expand, etc.) /\n splitterRef?: React.RefObject<UseSplitterReturnValue \| null>;\n\n /* Splitter panes */\n children?: React.ReactNode;\n}\n\nexport type SplitterFactory = Factory<{\n props: SplitterProps;\n ref: HTMLDivElement;\n stylesNames: SplitterStylesNames;\n vars: SplitterCssVariables;\n staticComponents: {\n Pane: typeof SplitterPane;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n lineSize: 2,\n withHandle: true,\n resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>;\n\nconst varsResolver = createVarsResolver<SplitterFactory>((theme, { lineSize, handleColor }) => ({\n root: {\n '--splitter-line-size': rem(lineSize),\n '--splitter-handle-color': handleColor ? getThemeColor(handleColor, theme) : undefined,\n },\n}));\n\nexport const Splitter = factory<SplitterFactory>((_props) => {\n const props = useProps('Splitter', defaultProps, _props);\n const {\n orientation,\n sizes: controlledSizes,\n onSizeChange,\n onResizeStart,\n onResizeEnd,\n onCollapseChange,\n redistribute,\n step,\n shiftStep,\n lineSize,\n handleColor,\n handleIcon,\n withHandle,\n resetOnDoubleClick,\n splitterRef,\n children,\n className,\n classNames,\n style,\n styles,\n unstyled,\n vars,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n\n const paneChildren = Children.toArray(children) as React.ReactElement<SplitterPaneProps>[];\n\n const panels = paneChildren.map((child) => ({\n defaultSize: child.props.defaultSize,\n min: child.props.min,\n max: child.props.max,\n collapsible: child.props.collapsible,\n collapseThreshold: child.props.collapseThreshold,\n }));\n\n const splitter = useSplitter({\n panels,\n orientation,\n sizes: controlledSizes,\n onSizeChange,\n onResizeStart,\n onResizeEnd,\n onCollapseChange,\n redistribute,\n step,\n shiftStep,\n dir,\n resetOnDoubleClick,\n });\n\n useImperativeHandle(splitterRef, () => splitter, [splitter]);\n\n const mergedRef = useMergedRef(ref, splitter.ref);\n\n const getStyles = useStyles<SplitterFactory>({\n name: 'Splitter',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const defaultIcon = orientation === 'vertical' ? <GripHorizontalIcon /> : <GripVerticalIcon />;\n const thumbIcon = handleIcon !== undefined ? handleIcon : defaultIcon;\n\n const items: React.ReactNode[] = [];\n\n paneChildren.forEach((child, index) => {\n if (index > 0) {\n const handleProps = splitter.getHandleProps({ index: index - 1 });\n const isActive = splitter.activeHandle === index - 1;\n items.push(\n <Box {...getStyles('handle')} key={`handle-${index - 1}`} {...handleProps}>\n {withHandle && (\n <div\n {...getStyles('thumb')}\n data-orientation={orientation}\n data-active={isActive \|\| undefined}\n >\n {thumbIcon}\n </div>\n )}\n </Box>\n );\n }\n\n items.push(\n cloneElement(child, {\n key: `pane-${index}`,\n __index: index,\n })\n );\n });\n\n return (\n <SplitterProvider\n value={{\n getStyles,\n sizes: splitter.sizes,\n collapsed: splitter.collapsed,\n orientation: orientation!,\n }}\n >\n <Box ref={mergedRef} {...getStyles('root')} mod={[{ orientation }, mod]} {...others}>\n {items}\n </Box>\n </SplitterProvider>\n );\n});\n\nSplitter.classes = classes;\nSplitter.varsResolver = varsResolver;\nSplitter.displayName = '@mantine/core/Splitter';\nSplitter.Pane = SplitterPane;\n"],"mappings":";;;;;;;;;;;;;;;;;~~AAkGA~~,MAAM,eAAe;CACnB,aAAa;CACb,UAAU;CACV,YAAY;CACZ,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAAqC,OAAO,EAAE,UAAU,mBAAmB,EAC9F,MAAM;CACJ,wBAAwB,IAAI,QAAQ;CACpC,2BAA2B,cAAc,cAAc,aAAa,KAAK,IAAI,KAAA;AAC/E,EACF,EAAE;AAEF,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,aACA,OAAO,iBACP,cACA,eACA,aACA,kBACA,cACA,MACA,WACA,UACA,aACA,YACA,YACA,oBACA,aACA,UACA,WACA,YACA,OACA,QACA,UACA,MACA,KACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,eAAe,SAAS,QAAQ,QAAQ;CAU9C,MAAM,WAAW,YAAY;EAC3B,QATa,aAAa,KAAK,WAAW;GAC1C,aAAa,MAAM,MAAM;GACzB,KAAK,MAAM,MAAM;GACjB,KAAK,MAAM,MAAM;GACjB,aAAa,MAAM,MAAM;GACzB,mBAAmB,MAAM,MAAM;EACjC,EAGO;EACL;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,oBAAoB,mBAAmB,UAAU,CAAC,QAAQ,CAAC;CAE3D,MAAM,YAAY,aAAa,KAAK,SAAS,GAAG;CAEhD,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAGD,MAAM,YAAY,eAAe,KAAA,IAAY,aADzB,gBAAgB,aAAa,oBAAC,oBAAD,CAAqB,CAAA,IAAI,oBAAC,kBAAD,CAAmB,CAAA;CAG7F,MAAM,QAA2B,CAAC;CAElC,aAAa,SAAS,OAAO,UAAU;EACrC,IAAI,QAAQ,GAAG;GACb,MAAM,cAAc,SAAS,eAAe,EAAE,OAAO,QAAQ,EAAE,CAAC;GAChE,MAAM,WAAW,SAAS,iBAAiB,QAAQ;GACnD,MAAM,KACJ,8BAAC,KAAD;IAAK,GAAI,UAAU,QAAQ;IAAG,KAAK,UAAU,QAAQ;IAAK,GAAI;GAUzD,GATF,cACC,oBAAC,OAAD;IACE,GAAI,UAAU,OAAO;IACrB,oBAAkB;IAClB,eAAa,YAAY,KAAA;cAExB;GACE,CAAA,CAEJ,CACP;EACF;EAEA,MAAM,KACJ,aAAa,OAAO;GAClB,KAAK,QAAQ;GACb,SAAS;EACX,CAAC,CACH;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA,OAAO,SAAS;GAChB,WAAW,SAAS;GACP;~~EACf~~;YAEA,oBAAC,KAAD;GAAK,KAAK;GAAW,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,YAAY,GAAG,GAAG;GAAG,GAAI;aAC1E;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}
1	+ {"version":3,"file":"Splitter.mjs","names":["classes"],"sources":["../../../src/components/Splitter/Splitter.tsx"],"sourcesContent":["import { Children, cloneElement, useImperativeHandle } from 'react';\nimport {\n SplitterPaneSize,\n SplitterStep,\n useMergedRef,\n useSplitter,\n UseSplitterRedistributeFn,\n UseSplitterReturnValue,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n rem,\n StylesApiProps,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport { GripHorizontalIcon, GripVerticalIcon } from './GripIcon';\nimport { SplitterProvider } from './Splitter.context';\nimport {\n SplitterPane,\n SplitterPaneProps,\n SplitterPaneStylesNames,\n} from './SplitterPane/SplitterPane';\nimport classes from './Splitter.module.css';\n\nconst PX_RE = /^(-?[\\d.]+)px$/;\nconst REM_RE = /^(-?[\\d.]+)rem$/;\n\nfunction isFixedPaneSize(size: SplitterPaneSize): boolean {\n return typeof size === 'string' && (PX_RE.test(size) \|\| REM_RE.test(size));\n}\n\nfunction getPaneFlexStyle(size: SplitterPaneSize, pixelMode: boolean): React.CSSProperties {\n const magnitude = typeof size === 'number' ? size : parseFloat(size);\n\n if (!pixelMode) {\n return { flexBasis: `${magnitude}%` };\n }\n\n if (isFixedPaneSize(size)) {\n return { flexGrow: 0, flexShrink: 1, flexBasis: size as string };\n }\n\n return { flexGrow: magnitude, flexShrink: 1, flexBasis: 0 };\n}\n\nexport type SplitterStylesNames = 'root' \| 'handle' \| 'thumb' \| SplitterPaneStylesNames;\n\nexport type SplitterCssVariables = {\n root: '--splitter-line-size' \| '--splitter-handle-color';\n};\n\nexport interface SplitterProps\n extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {\n /** Layout direction @default 'horizontal' /\n orientation?: 'horizontal' \| 'vertical';\n\n /* Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed) /\n sizes?: SplitterPaneSize[];\n\n /* Called during resize with updated sizes, each value keeps its declared unit /\n onSizeChange?: (sizes: SplitterPaneSize[]) => void;\n\n /* Called when drag starts /\n onResizeStart?: (handleIndex: number) => void;\n\n /* Called when drag ends /\n onResizeEnd?: (handleIndex: number, sizes: SplitterPaneSize[]) => void;\n\n /* Called when a panel collapses or expands /\n onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;\n\n /* How to redistribute space when immediate neighbor is at its min/max /\n redistribute?: 'nearest' \| 'equal' \| UseSplitterRedistributeFn;\n\n /* Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 1 /\n step?: SplitterStep;\n\n /* Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 10 /\n shiftStep?: SplitterStep;\n\n /* CSS value for separator line thickness between panes @default 2 /\n lineSize?: number \| string;\n\n /* Key of `theme.colors` or any valid CSS color for the separator line /\n handleColor?: MantineColor;\n\n /* Custom icon displayed in the handle thumb, by default uses grip icon based on orientation /\n handleIcon?: React.ReactNode;\n\n /* Determines whether the thumb with grip icon is displayed on the handle @default true /\n withHandle?: boolean;\n\n /* Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true /\n resetOnDoubleClick?: boolean;\n\n /* Ref to imperative splitter API (sizes, collapse, expand, etc.) /\n splitterRef?: React.RefObject<UseSplitterReturnValue \| null>;\n\n /* Splitter panes */\n children?: React.ReactNode;\n}\n\nexport type SplitterFactory = Factory<{\n props: SplitterProps;\n ref: HTMLDivElement;\n stylesNames: SplitterStylesNames;\n vars: SplitterCssVariables;\n staticComponents: {\n Pane: typeof SplitterPane;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n lineSize: 2,\n withHandle: true,\n resetOnDoubleClick: true,\n} satisfies Partial<SplitterProps>;\n\nconst varsResolver = createVarsResolver<SplitterFactory>((theme, { lineSize, handleColor }) => ({\n root: {\n '--splitter-line-size': rem(lineSize),\n '--splitter-handle-color': handleColor ? getThemeColor(handleColor, theme) : undefined,\n },\n}));\n\nexport const Splitter = factory<SplitterFactory>((_props) => {\n const props = useProps('Splitter', defaultProps, _props);\n const {\n orientation,\n sizes: controlledSizes,\n onSizeChange,\n onResizeStart,\n onResizeEnd,\n onCollapseChange,\n redistribute,\n step,\n shiftStep,\n lineSize,\n handleColor,\n handleIcon,\n withHandle,\n resetOnDoubleClick,\n splitterRef,\n children,\n className,\n classNames,\n style,\n styles,\n unstyled,\n vars,\n mod,\n attributes,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n\n const paneChildren = Children.toArray(children) as React.ReactElement<SplitterPaneProps>[];\n\n const panels = paneChildren.map((child) => ({\n defaultSize: child.props.defaultSize,\n min: child.props.min,\n max: child.props.max,\n collapsible: child.props.collapsible,\n collapseThreshold: child.props.collapseThreshold,\n }));\n\n const splitter = useSplitter({\n panels,\n orientation,\n sizes: controlledSizes,\n onSizeChange,\n onResizeStart,\n onResizeEnd,\n onCollapseChange,\n redistribute,\n step,\n shiftStep,\n dir,\n resetOnDoubleClick,\n });\n\n useImperativeHandle(splitterRef, () => splitter, [splitter]);\n\n const getPaneStyle = (index: number) =>\n getPaneFlexStyle(splitter.sizes[index], splitter.pixelMode);\n\n const mergedRef = useMergedRef(ref, splitter.ref);\n\n const getStyles = useStyles<SplitterFactory>({\n name: 'Splitter',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const defaultIcon = orientation === 'vertical' ? <GripHorizontalIcon /> : <GripVerticalIcon />;\n const thumbIcon = handleIcon !== undefined ? handleIcon : defaultIcon;\n\n const items: React.ReactNode[] = [];\n\n paneChildren.forEach((child, index) => {\n if (index > 0) {\n const handleProps = splitter.getHandleProps({ index: index - 1 });\n const isActive = splitter.activeHandle === index - 1;\n items.push(\n <Box {...getStyles('handle')} key={`handle-${index - 1}`} {...handleProps}>\n {withHandle && (\n <div\n {...getStyles('thumb')}\n data-orientation={orientation}\n data-active={isActive \|\| undefined}\n >\n {thumbIcon}\n </div>\n )}\n </Box>\n );\n }\n\n items.push(\n cloneElement(child, {\n key: `pane-${index}`,\n __index: index,\n })\n );\n });\n\n return (\n <SplitterProvider\n value={{\n getStyles,\n sizes: splitter.sizes,\n collapsed: splitter.collapsed,\n orientation: orientation!,\n getPaneStyle,\n }}\n >\n <Box ref={mergedRef} {...getStyles('root')} mod={[{ orientation }, mod]} {...others}>\n {items}\n </Box>\n </SplitterProvider>\n );\n});\n\nSplitter.classes = classes;\nSplitter.varsResolver = varsResolver;\nSplitter.displayName = '@mantine/core/Splitter';\nSplitter.Pane = SplitterPane;\n"],"mappings":"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"}

package/esm/components/Splitter/SplitterPane/SplitterPane.mjs CHANGED Viewed

@@ -10,9 +10,8 @@ const SplitterPane = factory((_props) => {
 	const props = useProps("SplitterPane", null, _props);
 	const { className, classNames, style, styles, vars, children, defaultSize, min, max, collapsible, collapseThreshold, __index, mod, ...others } = props;
 	const ctx = useSplitterContext();
-	const size = ctx.sizes[__index];
 	const isCollapsed = ctx.collapsed[__index];
-	const sizeStyle = { flexBasis: `${size}%` };
+	const sizeStyle = ctx.getPaneStyle(__index);
 	return /* @__PURE__ */ jsx(Box, {
 		...ctx.getStyles("pane", {
 			className,

package/esm/components/Splitter/SplitterPane/SplitterPane.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitterPane.mjs","names":["classes"],"sources":["../../../../src/components/Splitter/SplitterPane/SplitterPane.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useSplitterContext } from '../Splitter.context';\nimport classes from '../Splitter.module.css';\n\nexport type SplitterPaneStylesNames = 'pane';\n\nexport interface SplitterPaneProps\n extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {\n /** Initial size as ~~percentage~~ (~~0-100~~). ~~All~~ ~~panes~~ ~~must~~ ~~sum~~ to ~~100~~. /\n defaultSize: ~~number~~;\n\n /* Minimum size ~~percentage~~ @default 0 /\n min?: ~~number~~;\n\n /* Maximum size ~~percentage~~ @default ~~100~~ /\n max?: ~~number~~;\n\n /* Whether this pane can be collapsed @default false /\n collapsible?: boolean;\n\n /* Size below which the pane snaps to collapsed ~~(percentage)~~, defaults to `min` /\n collapseThreshold?: ~~number~~;\n\n /* Pane content /\n children?: React.ReactNode;\n\n /* @internal Index set by parent */\n __index?: number;\n}\n\nexport type SplitterPaneFactory = Factory<{\n props: SplitterPaneProps;\n ref: HTMLDivElement;\n stylesNames: SplitterPaneStylesNames;\n compound: true;\n}>;\n\nexport const SplitterPane = factory<SplitterPaneFactory>((_props) => {\n const props = useProps('SplitterPane', null, _props);\n const {\n className,\n classNames,\n style,\n styles,\n vars,\n children,\n defaultSize,\n min,\n max,\n collapsible,\n collapseThreshold,\n __index,\n mod,\n ...others\n } = props;\n\n const ctx = useSplitterContext();\n const ~~size = ctx.sizes[__index!];\n const~~ isCollapsed = ctx.collapsed[__index!];\n\n const sizeStyle = ~~{ flexBasis: `${size}%` }~~;\n\n return (\n <Box\n {...ctx.getStyles('pane', {\n className,\n classNames,\n style: [sizeStyle, style],\n styles,\n props,\n })}\n mod={[{ collapsed: isCollapsed \|\| undefined }, mod]}\n {...others}\n >\n {children}\n </Box>\n );\n});\n\nSplitterPane.classes = classes;\nSplitterPane.displayName = '@mantine/core/SplitterPane';\n"],"mappings":";;;;;;;;~~AA6CA~~,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,WACA,YACA,OACA,QACA,MACA,UACA,aACA,KACA,KACA,aACA,mBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAC/B,MAAM,~~OAAO,IAAI,MAAM;CACvB,MAAM,~~cAAc,IAAI,UAAU;CAElC,MAAM,YAAY,~~EAAE~~,~~WAAW~~,~~GAAG,KAAK,GAAG~~;~~CAE1C~~,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GACxB;GACA;GACA,OAAO,CAAC,WAAW,KAAK;GACxB;GACA;EACF,CAAC;EACD,KAAK,CAAC,EAAE,WAAW,eAAe,KAAA,EAAU,GAAG,GAAG;EAClD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
1	+ {"version":3,"file":"SplitterPane.mjs","names":["classes"],"sources":["../../../../src/components/Splitter/SplitterPane/SplitterPane.tsx"],"sourcesContent":["import type { SplitterPaneSize } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { useSplitterContext } from '../Splitter.context';\nimport classes from '../Splitter.module.css';\n\nexport type SplitterPaneStylesNames = 'pane';\n\nexport interface SplitterPaneProps\n extends BoxProps, CompoundStylesApiProps<SplitterPaneFactory>, ElementProps<'div'> {\n /** Initial size, a `number`/`%` is a flexible size (shares leftover space), `px`/`rem` is a fixed size. A bare number is treated as a percentage. /\n defaultSize: SplitterPaneSize;\n\n /* Minimum size in the same units as `defaultSize` @default 0 /\n min?: SplitterPaneSize;\n\n /* Maximum size in the same units as `defaultSize`, no limit by default /\n max?: SplitterPaneSize;\n\n /* Whether this pane can be collapsed @default false /\n collapsible?: boolean;\n\n /* Size below which the pane snaps to collapsed, defaults to `min` /\n collapseThreshold?: SplitterPaneSize;\n\n /* Pane content /\n children?: React.ReactNode;\n\n /* @internal Index set by parent */\n __index?: number;\n}\n\nexport type SplitterPaneFactory = Factory<{\n props: SplitterPaneProps;\n ref: HTMLDivElement;\n stylesNames: SplitterPaneStylesNames;\n compound: true;\n}>;\n\nexport const SplitterPane = factory<SplitterPaneFactory>((_props) => {\n const props = useProps('SplitterPane', null, _props);\n const {\n className,\n classNames,\n style,\n styles,\n vars,\n children,\n defaultSize,\n min,\n max,\n collapsible,\n collapseThreshold,\n __index,\n mod,\n ...others\n } = props;\n\n const ctx = useSplitterContext();\n const isCollapsed = ctx.collapsed[__index!];\n\n const sizeStyle = ctx.getPaneStyle(__index!);\n\n return (\n <Box\n {...ctx.getStyles('pane', {\n className,\n classNames,\n style: [sizeStyle, style],\n styles,\n props,\n })}\n mod={[{ collapsed: isCollapsed \|\| undefined }, mod]}\n {...others}\n >\n {children}\n </Box>\n );\n});\n\nSplitterPane.classes = classes;\nSplitterPane.displayName = '@mantine/core/SplitterPane';\n"],"mappings":";;;;;;;;AA8CA,MAAa,eAAe,SAA8B,WAAW;CACnE,MAAM,QAAQ,SAAS,gBAAgB,MAAM,MAAM;CACnD,MAAM,EACJ,WACA,YACA,OACA,QACA,MACA,UACA,aACA,KACA,KACA,aACA,mBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,mBAAmB;CAC/B,MAAM,cAAc,IAAI,UAAU;CAElC,MAAM,YAAY,IAAI,aAAa,OAAQ;CAE3C,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GACxB;GACA;GACA,OAAO,CAAC,WAAW,KAAK;GACxB;GACA;EACF,CAAC;EACD,KAAK,CAAC,EAAE,WAAW,eAAe,KAAA,EAAU,GAAG,GAAG;EAClD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

package/esm/components/Stack/Stack.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.mjs","names":["classes"],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Stack.module.css';\n\nexport type StackStylesNames = 'root';\nexport type StackCssVariables = {\n root: '--stack-gap' \| '--stack-align' \| '--stack-justify';\n};\n\nexport interface StackProps extends BoxProps, StylesApiProps<StackFactory>, ElementProps<'div'> {\n /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Controls `align-items` CSS property @default 'stretch' /\n align?: React.CSSProperties['alignItems'];\n\n /* Controls `justify-content` CSS property @default 'flex-start' */\n justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type StackFactory = Factory<{\n props: StackProps;\n ref: HTMLDivElement;\n stylesNames: StackStylesNames;\n vars: StackCssVariables;\n}>;\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>;\n\nconst varsResolver = createVarsResolver<StackFactory>((_, { gap, align, justify }) => ({\n root: {\n '--stack-gap': getSpacing(gap),\n '--stack-align': align,\n '--stack-justify': justify,\n },\n}));\n\nexport const Stack = factory<StackFactory>((_props) => {\n const props = useProps('Stack', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n align,\n justify,\n gap,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} variant={variant} {...others} />;\n});\n\nStack.classes = classes;\nStack.varsResolver = varsResolver;\nStack.displayName = '@mantine/core/Stack';\n\nexport namespace Stack {\n export type Props = StackProps;\n export type StylesNames = StackStylesNames;\n export type CssVariables = StackCssVariables;\n export type Factory = StackFactory;\n}\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe;CACnB,KAAK;CACL,OAAO;CACP,SAAS;AACX;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,KAAK,OAAO,eAAe,EACrF,MAAM;CACJ,eAAe,WAAW,GAAG;CAC7B,iBAAiB;CACjB,mBAAmB;AACrB,EACF,EAAE;AAEF,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,SACA,KACA,SACA,YACA,GAAG,WACD;CAgBJ,OAAO,oBAAC,KAAD;EAAK,GAdM,UAAwB;GACxC,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,~~EAAE~~,MAAM;EAAY;EAAS,GAAI;CAAS,CAAA;AACpE,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
1	+ {"version":3,"file":"Stack.mjs","names":["classes"],"sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Stack.module.css';\n\nexport type StackStylesNames = 'root';\nexport type StackCssVariables = {\n root: '--stack-gap' \| '--stack-align' \| '--stack-justify';\n};\n\nexport interface StackProps extends BoxProps, StylesApiProps<StackFactory>, ElementProps<'div'> {\n /** Key of `theme.spacing` or any valid CSS value to set `gap` property, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Controls `align-items` CSS property @default 'stretch' /\n align?: React.CSSProperties['alignItems'];\n\n /* Controls `justify-content` CSS property @default 'flex-start' */\n justify?: React.CSSProperties['justifyContent'];\n}\n\nexport type StackFactory = Factory<{\n props: StackProps;\n ref: HTMLDivElement;\n stylesNames: StackStylesNames;\n vars: StackCssVariables;\n}>;\n\nconst defaultProps = {\n gap: 'md',\n align: 'stretch',\n justify: 'flex-start',\n} satisfies Partial<StackProps>;\n\nconst varsResolver = createVarsResolver<StackFactory>((_, { gap, align, justify }) => ({\n root: {\n '--stack-gap': getSpacing(gap),\n '--stack-align': align,\n '--stack-justify': justify,\n },\n}));\n\nexport const Stack = factory<StackFactory>((_props) => {\n const props = useProps('Stack', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n align,\n justify,\n gap,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StackFactory>({\n name: 'Stack',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} variant={variant} {...others} />;\n});\n\nStack.classes = classes;\nStack.varsResolver = varsResolver;\nStack.displayName = '@mantine/core/Stack';\n\nexport namespace Stack {\n export type Props = StackProps;\n export type StylesNames = StackStylesNames;\n export type CssVariables = StackCssVariables;\n export type Factory = StackFactory;\n}\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe;CACnB,KAAK;CACL,OAAO;CACP,SAAS;AACX;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,KAAK,OAAO,eAAe,EACrF,MAAM;CACJ,eAAe,WAAW,GAAG;CAC7B,iBAAiB;CACjB,mBAAmB;AACrB,EACF,EAAE;AAEF,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,SACA,KACA,SACA,YACA,GAAG,WACD;CAgBJ,OAAO,oBAAC,KAAD;EAAK,GAdM,UAAwB;GACxC,MAAM;GACN;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEwB,CAAC,CAAC,MAAM;EAAY;EAAS,GAAI;CAAS,CAAA;AACpE,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

package/esm/components/Stepper/Stepper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { StepperProvider, type StepperContextValue } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n \| 'root'\n \| 'separator'\n \| 'steps'\n \| 'content'\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepIconContent'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport type StepperCssVariables = {\n root:\n \| '--stepper-color'\n \| '--stepper-icon-color'\n \| '--stepper-icon-size'\n \| '--stepper-content-padding'\n \| '--stepper-radius'\n \| '--stepper-fz'\n \| '--stepper-spacing';\n};\n\nexport interface StepperProps\n extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n /** `Stepper.Step` components /\n children: React.ReactNode;\n\n /* Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. /\n onStepClick?: (stepIndex: number) => void;\n\n /* Index of the active step /\n active: number;\n\n /* Step icon @default step index + 1 /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed @default CheckIcon /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress @default step index + 1 /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the step icon, by default icon size is inferred from `size` prop /\n iconSize?: number \| string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' /\n contentPadding?: MantineSpacing;\n\n /* Stepper orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Icon position relative to the step body @default 'left' /\n iconPosition?: 'right' \| 'left';\n\n /* Controls size of various Stepper elements /\n size?: MantineSize;\n\n /* Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" /\n radius?: MantineRadius;\n\n /* When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true /\n allowNextStepsSelect?: boolean;\n\n /* Determines whether steps should wrap to the next line if no space is available @default true /\n wrap?: boolean;\n\n /* When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color /\n autoContrast?: boolean;\n\n /* If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n props: StepperProps;\n ref: HTMLDivElement;\n stylesNames: StepperStylesNames;\n vars: StepperCssVariables;\n staticComponents: {\n Step: typeof StepperStep;\n Completed: typeof StepperCompleted;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n iconPosition: 'left',\n allowNextStepsSelect: true,\n wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n root: {\n '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--stepper-icon-size':\n iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n '--stepper-content-padding': getSpacing(contentPadding),\n '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n '--stepper-fz': getFontSize(size),\n '--stepper-spacing': getSpacing(size),\n },\n })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n const props = useProps('Stepper', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n onStepClick,\n active,\n icon,\n completedIcon,\n progressIcon,\n color,\n iconSize,\n contentPadding,\n orientation,\n iconPosition,\n size,\n radius,\n allowNextStepsSelect,\n wrap,\n autoContrast,\n keepMounted,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StepperFactory>({\n name: 'Stepper',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const convertedChildren = Children.toArray(children) as React.ReactElement[];\n const _children = convertedChildren.filter(\n (child) => child.type !== StepperCompleted\n ) as React.ReactElement<StepperStepProps>[];\n const completedStep = convertedChildren.find(\n (item) => item.type === StepperCompleted\n ) as React.ReactElement<StepperCompletedProps>;\n\n const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n (acc, item: React.ReactElement<StepperStepProps>, index) => {\n const state =\n active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n const shouldAllowSelect = () => {\n if (typeof onStepClick !== 'function') {\n return false;\n }\n\n if (typeof item.props.allowStepSelect === 'boolean') {\n return item.props.allowStepSelect;\n }\n\n return state === 'stepCompleted' \|\| allowNextStepsSelect;\n };\n\n const isStepSelectionEnabled = shouldAllowSelect();\n\n acc.push(\n cloneElement(item, {\n icon: item.props.icon \|\| icon \|\| index + 1,\n key: index,\n step: index,\n state,\n onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n allowStepClick: isStepSelectionEnabled,\n completedIcon: item.props.completedIcon \|\| completedIcon,\n progressIcon: item.props.progressIcon \|\| progressIcon,\n color: item.props.color \|\| color,\n iconSize,\n iconPosition: item.props.iconPosition \|\| iconPosition,\n orientation,\n })\n );\n\n if (orientation === 'horizontal' && index !== _children.length - 1) {\n acc.push(\n <div\n {...getStyles('separator')}\n data-active={index < active \|\| undefined}\n data-orientation={orientation}\n key={`separator-${index}`}\n />\n );\n }\n\n return acc;\n },\n []\n );\n\n const stepContent = _children[active]?.props?.children;\n const completedContent = completedStep?.props?.children;\n const content = active > _children.length - 1 ? completedContent : stepContent;\n\n const contentSection = keepMounted ? (\n <>\n {_children.map((child, index) => (\n <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{child.props.children}</div>\n </Activity>\n ))}\n {completedStep && (\n <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{completedStep.props.children}</div>\n </Activity>\n )}\n </>\n ) : (\n content && <div {...getStyles('content')}>{content}</div>\n );\n\n return (\n <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n <Box {...getStyles('root')} size={size} {...others}>\n <Box\n {...getStyles('steps')}\n mod={{\n orientation,\n 'icon-position': iconPosition,\n wrap: wrap && orientation !== 'vertical',\n }}\n >\n {items}\n </Box>\n {contentSection}\n </Box>\n </StepperProvider>\n );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n\nexport namespace Stepper {\n export type Props = StepperProps;\n export type StylesNames = StepperStylesNames;\n export type CssVariables = StepperCssVariables;\n export type Factory = StepperFactory;\n export type Step = StepFragmentComponent;\n export type ContextValue = StepperContextValue;\n\n export namespace Step {\n export type Props = StepperStepProps;\n }\n\n export namespace Completed {\n export type Props = StepperCompletedProps;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Stepper.mjs","names":["classes"],"sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Activity, Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getFontSize,\n getRadius,\n getSize,\n getSpacing,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n MantineSpacing,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { StepperProvider, type StepperContextValue } from './Stepper.context';\nimport { StepperCompleted, StepperCompletedProps } from './StepperCompleted/StepperCompleted';\nimport { StepperStep, StepperStepProps } from './StepperStep/StepperStep';\nimport classes from './Stepper.module.css';\nexport type StepFragmentComponent = React.FC<{ step: number }>;\n\nexport type StepperStylesNames =\n \| 'root'\n \| 'separator'\n \| 'steps'\n \| 'content'\n \| 'step'\n \| 'stepLoader'\n \| 'verticalSeparator'\n \| 'stepWrapper'\n \| 'stepIcon'\n \| 'stepCompletedIcon'\n \| 'stepIconContent'\n \| 'stepBody'\n \| 'stepLabel'\n \| 'stepDescription';\n\nexport type StepperCssVariables = {\n root:\n \| '--stepper-color'\n \| '--stepper-icon-color'\n \| '--stepper-icon-size'\n \| '--stepper-content-padding'\n \| '--stepper-radius'\n \| '--stepper-fz'\n \| '--stepper-spacing';\n};\n\nexport interface StepperProps\n extends BoxProps, StylesApiProps<StepperFactory>, ElementProps<'div'> {\n /** `Stepper.Step` components /\n children: React.ReactNode;\n\n /* Called when a clickable step is clicked with its 0-based index. Not called for the currently active step. /\n onStepClick?: (stepIndex: number) => void;\n\n /* Index of the active step /\n active: number;\n\n /* Step icon @default step index + 1 /\n icon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is completed @default CheckIcon /\n completedIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Step icon displayed when step is in progress @default step index + 1 /\n progressIcon?: React.ReactNode \| StepFragmentComponent;\n\n /* Key of `theme.colors` or any valid CSS color, controls colors of active and progress steps @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the step icon, by default icon size is inferred from `size` prop /\n iconSize?: number \| string;\n\n /* Key of `theme.spacing` or any valid CSS value to set `padding-top` of the content @default 'md' /\n contentPadding?: MantineSpacing;\n\n /* Stepper orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Icon position relative to the step body @default 'left' /\n iconPosition?: 'right' \| 'left';\n\n /* Controls size of various Stepper elements /\n size?: MantineSize;\n\n /* Key of `theme.radius` or any valid CSS value to set steps border-radius @default \"xl\" /\n radius?: MantineRadius;\n\n /* When true, users can click and jump to any step. When false, users can only navigate to completed steps @default true /\n allowNextStepsSelect?: boolean;\n\n /* Determines whether steps should wrap to the next line if no space is available @default true /\n wrap?: boolean;\n\n /* When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color /\n autoContrast?: boolean;\n\n /* If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */\n keepMounted?: boolean;\n}\n\nexport type StepperFactory = Factory<{\n props: StepperProps;\n ref: HTMLDivElement;\n stylesNames: StepperStylesNames;\n vars: StepperCssVariables;\n staticComponents: {\n Step: typeof StepperStep;\n Completed: typeof StepperCompleted;\n };\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n iconPosition: 'left',\n allowNextStepsSelect: true,\n wrap: true,\n} satisfies Partial<StepperProps>;\n\nconst varsResolver = createVarsResolver<StepperFactory>(\n (theme, { color, iconSize, size, contentPadding, radius, autoContrast }) => ({\n root: {\n '--stepper-color': color ? getThemeColor(color, theme) : undefined,\n '--stepper-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n '--stepper-icon-size':\n iconSize === undefined ? getSize(size, 'stepper-icon-size') : rem(iconSize),\n '--stepper-content-padding': getSpacing(contentPadding),\n '--stepper-radius': radius === undefined ? undefined : getRadius(radius),\n '--stepper-fz': getFontSize(size),\n '--stepper-spacing': getSpacing(size),\n },\n })\n);\n\nexport const Stepper = factory<StepperFactory>((_props) => {\n const props = useProps('Stepper', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n onStepClick,\n active,\n icon,\n completedIcon,\n progressIcon,\n color,\n iconSize,\n contentPadding,\n orientation,\n iconPosition,\n size,\n radius,\n allowNextStepsSelect,\n wrap,\n autoContrast,\n keepMounted,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<StepperFactory>({\n name: 'Stepper',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const convertedChildren = Children.toArray(children) as React.ReactElement[];\n const _children = convertedChildren.filter(\n (child) => child.type !== StepperCompleted\n ) as React.ReactElement<StepperStepProps>[];\n const completedStep = convertedChildren.find(\n (item) => item.type === StepperCompleted\n ) as React.ReactElement<StepperCompletedProps>;\n\n const items = _children.reduce<React.ReactElement<StepperStepProps>[]>(\n (acc, item: React.ReactElement<StepperStepProps>, index) => {\n const state =\n active === index ? 'stepProgress' : active > index ? 'stepCompleted' : 'stepInactive';\n\n const shouldAllowSelect = () => {\n if (typeof onStepClick !== 'function') {\n return false;\n }\n\n if (typeof item.props.allowStepSelect === 'boolean') {\n return item.props.allowStepSelect;\n }\n\n return state === 'stepCompleted' \|\| allowNextStepsSelect;\n };\n\n const isStepSelectionEnabled = shouldAllowSelect();\n\n acc.push(\n cloneElement(item, {\n icon: item.props.icon \|\| icon \|\| index + 1,\n key: index,\n step: index,\n state,\n onClick: () => isStepSelectionEnabled && onStepClick?.(index),\n allowStepClick: isStepSelectionEnabled,\n completedIcon: item.props.completedIcon \|\| completedIcon,\n progressIcon: item.props.progressIcon \|\| progressIcon,\n color: item.props.color \|\| color,\n iconSize,\n iconPosition: item.props.iconPosition \|\| iconPosition,\n orientation,\n })\n );\n\n if (orientation === 'horizontal' && index !== _children.length - 1) {\n acc.push(\n <div\n {...getStyles('separator')}\n data-active={index < active \|\| undefined}\n data-orientation={orientation}\n key={`separator-${index}`}\n />\n );\n }\n\n return acc;\n },\n []\n );\n\n const stepContent = _children[active]?.props?.children;\n const completedContent = completedStep?.props?.children;\n const content = active > _children.length - 1 ? completedContent : stepContent;\n\n const contentSection = keepMounted ? (\n <>\n {_children.map((child, index) => (\n <Activity key={index} mode={active === index ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{child.props.children}</div>\n </Activity>\n ))}\n {completedStep && (\n <Activity mode={active > _children.length - 1 ? 'visible' : 'hidden'}>\n <div {...getStyles('content')}>{completedStep.props.children}</div>\n </Activity>\n )}\n </>\n ) : (\n content && <div {...getStyles('content')}>{content}</div>\n );\n\n return (\n <StepperProvider value={{ getStyles, orientation, iconPosition }}>\n <Box {...getStyles('root')} size={size} {...others}>\n <Box\n {...getStyles('steps')}\n mod={{\n orientation,\n 'icon-position': iconPosition,\n wrap: wrap && orientation !== 'vertical',\n }}\n >\n {items}\n </Box>\n {contentSection}\n </Box>\n </StepperProvider>\n );\n});\n\nStepper.classes = classes;\nStepper.varsResolver = varsResolver;\nStepper.displayName = '@mantine/core/Stepper';\nStepper.Completed = StepperCompleted;\nStepper.Step = StepperStep;\n\nexport namespace Stepper {\n export type Props = StepperProps;\n export type StylesNames = StepperStylesNames;\n export type CssVariables = StepperCssVariables;\n export type Factory = StepperFactory;\n export type Step = StepFragmentComponent;\n export type ContextValue = StepperContextValue;\n\n export namespace Step {\n export type Props = StepperStepProps;\n }\n\n export namespace Completed {\n export type Props = StepperCompletedProps;\n }\n}\n"],"mappings":"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"}

package/esm/components/Switch/Switch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.mjs","names":["useId","classes"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n SwitchGroup,\n SwitchGroupContext,\n type SwitchGroupProps,\n type SwitchGroupStylesNames,\n type SwitchGroupFactory,\n type SwitchGroupContextValue,\n} from './SwitchGroup/SwitchGroup';\nimport classes from './Switch.module.css';\nexport type SwitchStylesNames =\n \| 'root'\n \| 'track'\n \| 'trackLabel'\n \| 'thumb'\n \| 'input'\n \| InlineInputStylesNames;\n\nexport type SwitchCssVariables = {\n root:\n \| '--switch-radius'\n \| '--switch-height'\n \| '--switch-width'\n \| '--switch-thumb-size'\n \| '--switch-label-font-size'\n \| '--switch-track-label-padding'\n \| '--switch-color';\n};\n\nexport interface SwitchProps\n extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Id used to bind input and label, if not passed, unique id will be generated instead /\n id?: string;\n\n /* Content of the label associated with the switch /\n label?: React.ReactNode;\n\n /* Inner label when the `Switch` is in unchecked state /\n offLabel?: React.ReactNode;\n\n /* Inner label when the `Switch` is in checked state /\n onLabel?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color to set input color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of all elements /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Icon inside the thumb of the switch /\n thumbIcon?: React.ReactNode;\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 /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* If set, displays a colored dot inside the thumb that matches the track background color @default true */\n withThumbIndicator?: boolean;\n}\n\nexport type SwitchFactory = Factory<{\n props: SwitchProps;\n ref: HTMLInputElement;\n stylesNames: SwitchStylesNames;\n vars: SwitchCssVariables;\n staticComponents: {\n Group: typeof SwitchGroup;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withThumbIndicator: true,\n} satisfies Partial<SwitchProps>;\n\nconst varsResolver = createVarsResolver<SwitchFactory>((theme, { radius, color, size }) => ({\n root: {\n '--switch-radius': radius === undefined ? undefined : getRadius(radius),\n '--switch-height': getSize(size, 'switch-height'),\n '--switch-width': getSize(size, 'switch-width'),\n '--switch-thumb-size': getSize(size, 'switch-thumb-size'),\n '--switch-label-font-size': getSize(size, 'switch-label-font-size'),\n '--switch-track-label-padding': getSize(size, 'switch-track-label-padding'),\n '--switch-color': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Switch = factory<SwitchFactory>((_props) => {\n const props = useProps('Switch', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n offLabel,\n onLabel,\n id,\n size,\n radius,\n wrapperProps,\n thumbIcon,\n checked,\n defaultChecked,\n onChange,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n rootRef,\n mod,\n withThumbIndicator,\n attributes,\n ...others\n } = props;\n\n const ctx = use(SwitchGroupContext);\n const _size = size \|\| ctx?.size;\n\n const getStyles = useStyles<SwitchFactory>({\n name: 'Switch',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\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 withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const _disabled = disabled \|\| ctx?.isDisabled?.(rest.value as string);\n\n const [_checked, handleChange] = useUncontrolled({\n value: withContextProps.checked ?? checked,\n defaultValue: defaultChecked,\n finalValue: false,\n });\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Switch\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={_disabled}\n bodyElement=\"label\"\n labelElement=\"span\"\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <input\n {...rest}\n {...withContextProps}\n disabled={_disabled}\n checked={_checked}\n data-checked={withContextProps.checked}\n onChange={(event) => {\n withContextProps.onChange?.(event);\n handleChange(event.currentTarget.checked);\n }}\n id={uuid}\n type=\"checkbox\"\n role=\"switch\"\n inert={rest.inert}\n aria-describedby={describedBy}\n {...getStyles('input')}\n />\n\n <Box\n aria-hidden=\"true\"\n component=\"span\"\n mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}\n {...getStyles('track')}\n >\n <Box\n component=\"span\"\n mod={{ 'reduce-motion': true, 'with-thumb-indicator': withThumbIndicator && !thumbIcon }}\n {...getStyles('thumb')}\n >\n {thumbIcon}\n </Box>\n <span {...getStyles('trackLabel')}>{_checked ? onLabel : offLabel}</span>\n </Box>\n </InlineInput>\n );\n});\n\nSwitch.classes = { ...classes, ...InlineInputClasses };\nSwitch.varsResolver = varsResolver;\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n\nexport namespace Switch {\n export type Props = SwitchProps;\n export type StylesNames = SwitchStylesNames;\n export type CssVariables = SwitchCssVariables;\n export type Factory = SwitchFactory;\n\n export namespace Group {\n export type Props = SwitchGroupProps;\n export type StylesNames = SwitchGroupStylesNames;\n export type Factory = SwitchGroupFactory;\n export type Context = SwitchGroupContextValue;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyGA,MAAM,eAAe;CACnB,eAAe;CACf,oBAAoB;AACtB;AAEA,MAAM,eAAe,oBAAmC,OAAO,EAAE,QAAQ,OAAO,YAAY,EAC1F,MAAM;CACJ,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CACtE,mBAAmB,QAAQ,MAAM,eAAe;CAChD,kBAAkB,QAAQ,MAAM,cAAc;CAC9C,uBAAuB,QAAQ,MAAM,mBAAmB;CACxD,4BAA4B,QAAQ,MAAM,wBAAwB;CAClE,gCAAgC,QAAQ,MAAM,4BAA4B;CAC1E,kBAAkB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;AAC1D,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,UACA,SACA,IACA,MACA,QACA,cACA,WACA,SACA,gBACA,UACA,eACA,aACA,OACA,UACA,SACA,SACA,KACA,oBACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAM,IAAI,kBAAkB;CAClC,MAAM,QAAQ,QAAQ,KAAK;CAE3B,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,OAAOA,QAAM,EAAE;CAGrB,MAAM,cACJ;EAHoB,cAAc,GAAG,KAAK,gBAAgB,KAAA;EAC5C,SAAS,OAAO,UAAU,YAAY,GAAG,KAAK,UAAU,KAAA;EAE7C,KAAK;CAAmB,~~EAAE~~,OAAO,OAAO,~~EAAE~~,KAAK,GAAG,KAAK,KAAA;CAElF,MAAM,mBAAmB;EACvB,SAAS,KAAK,MAAM,SAAS,KAAK,KAAe,KAAK;EACtD,WAAW,UAA+C;GACxD,KAAK,SAAS,KAAK;GACnB,WAAW,KAAK;EAClB;CACF;CAEA,MAAM,YAAY,YAAY,KAAK,aAAa,KAAK,KAAe;CAEpE,MAAM,CAAC,UAAU,gBAAgB,gBAAgB;EAC/C,OAAO,iBAAiB,WAAW;EACnC,cAAc;EACd,YAAY;CACd,CAAC;CAED,OACE,qBAAC,aAAD;EACE,GAAI,UAAU,MAAM;EACpB,kBAAiB;EACjB,kBAAkB;EAClB,IAAI;EACJ,MAAM;EACS;EACR;EACM;EACN;EACP,UAAU;EACV,aAAY;EACZ,cAAa;EACD;EACJ;EACE;EACV,gBAAc,iBAAiB;EACtB;EACT,KAAK;EACA;EACO;EACZ,OAAO,KAAK;EACZ,GAAI;EACJ,GAAI;YAvBN,CAyBE,oBAAC,SAAD;GACE,GAAI;GACJ,GAAI;GACJ,UAAU;GACV,SAAS;GACT,gBAAc,iBAAiB;GAC/B,WAAW,UAAU;IACnB,iBAAiB,WAAW,KAAK;IACjC,aAAa,MAAM,cAAc,OAAO;GAC1C;GACA,IAAI;GACJ,MAAK;GACL,MAAK;GACL,OAAO,KAAK;GACZ,oBAAkB;GAClB,GAAI,UAAU,OAAO;EACtB,CAAA,GAED,qBAAC,KAAD;GACE,eAAY;GACZ,WAAU;GACV,KAAK;IAAE;IAAO,kBAAkB;IAAe,kBAAkB,CAAC,WAAW,CAAC;GAAS;GACvF,GAAI,UAAU,OAAO;aAJvB,CAME,oBAAC,KAAD;IACE,WAAU;IACV,KAAK;KAAE,iBAAiB;KAAM,wBAAwB,sBAAsB,CAAC;IAAU;IACvF,GAAI,UAAU,OAAO;cAEpB;GACE,CAAA,GACL,oBAAC,QAAD;IAAM,GAAI,UAAU,YAAY;cAAI,WAAW,UAAU;GAAe,CAAA,CACrE;IACM;;AAEjB,CAAC;AAED,OAAO,UAAU;CAAE,GAAGC;CAAS,GAAG;AAAmB;AACrD,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQ"}
1	+ {"version":3,"file":"Switch.mjs","names":["useId","classes"],"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { use } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { InlineInput, InlineInputClasses, InlineInputStylesNames } from '../../utils/InlineInput';\nimport {\n SwitchGroup,\n SwitchGroupContext,\n type SwitchGroupProps,\n type SwitchGroupStylesNames,\n type SwitchGroupFactory,\n type SwitchGroupContextValue,\n} from './SwitchGroup/SwitchGroup';\nimport classes from './Switch.module.css';\nexport type SwitchStylesNames =\n \| 'root'\n \| 'track'\n \| 'trackLabel'\n \| 'thumb'\n \| 'input'\n \| InlineInputStylesNames;\n\nexport type SwitchCssVariables = {\n root:\n \| '--switch-radius'\n \| '--switch-height'\n \| '--switch-width'\n \| '--switch-thumb-size'\n \| '--switch-label-font-size'\n \| '--switch-track-label-padding'\n \| '--switch-color';\n};\n\nexport interface SwitchProps\n extends BoxProps, StylesApiProps<SwitchFactory>, ElementProps<'input', 'size' \| 'children'> {\n /** Id used to bind input and label, if not passed, unique id will be generated instead /\n id?: string;\n\n /* Content of the label associated with the switch /\n label?: React.ReactNode;\n\n /* Inner label when the `Switch` is in unchecked state /\n offLabel?: React.ReactNode;\n\n /* Inner label when the `Switch` is in checked state /\n onLabel?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color to set input color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of all elements /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default 'xl' /\n radius?: MantineRadius;\n\n /* Props passed down to the root element /\n wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n /* Icon inside the thumb of the switch /\n thumbIcon?: React.ReactNode;\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 /* Assigns ref of the root element /\n rootRef?: React.Ref<HTMLDivElement>;\n\n /* If set, displays a colored dot inside the thumb that matches the track background color @default true */\n withThumbIndicator?: boolean;\n}\n\nexport type SwitchFactory = Factory<{\n props: SwitchProps;\n ref: HTMLInputElement;\n stylesNames: SwitchStylesNames;\n vars: SwitchCssVariables;\n staticComponents: {\n Group: typeof SwitchGroup;\n };\n}>;\n\nconst defaultProps = {\n labelPosition: 'right',\n withThumbIndicator: true,\n} satisfies Partial<SwitchProps>;\n\nconst varsResolver = createVarsResolver<SwitchFactory>((theme, { radius, color, size }) => ({\n root: {\n '--switch-radius': radius === undefined ? undefined : getRadius(radius),\n '--switch-height': getSize(size, 'switch-height'),\n '--switch-width': getSize(size, 'switch-width'),\n '--switch-thumb-size': getSize(size, 'switch-thumb-size'),\n '--switch-label-font-size': getSize(size, 'switch-label-font-size'),\n '--switch-track-label-padding': getSize(size, 'switch-track-label-padding'),\n '--switch-color': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Switch = factory<SwitchFactory>((_props) => {\n const props = useProps('Switch', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n label,\n offLabel,\n onLabel,\n id,\n size,\n radius,\n wrapperProps,\n thumbIcon,\n checked,\n defaultChecked,\n onChange,\n labelPosition,\n description,\n error,\n disabled,\n variant,\n rootRef,\n mod,\n withThumbIndicator,\n attributes,\n ...others\n } = props;\n\n const ctx = use(SwitchGroupContext);\n const _size = size \|\| ctx?.size;\n\n const getStyles = useStyles<SwitchFactory>({\n name: 'Switch',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\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 withContextProps = {\n checked: ctx?.value.includes(rest.value as string) ?? checked,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n ctx?.onChange(event);\n onChange?.(event);\n },\n };\n\n const _disabled = disabled \|\| ctx?.isDisabled?.(rest.value as string);\n\n const [_checked, handleChange] = useUncontrolled({\n value: withContextProps.checked ?? checked,\n defaultValue: defaultChecked,\n finalValue: false,\n });\n\n return (\n <InlineInput\n {...getStyles('root')}\n __staticSelector=\"Switch\"\n __stylesApiProps={props}\n id={uuid}\n size={_size}\n labelPosition={labelPosition}\n label={label}\n description={description}\n error={error}\n disabled={_disabled}\n bodyElement=\"label\"\n labelElement=\"span\"\n classNames={classNames}\n styles={styles}\n unstyled={unstyled}\n data-checked={withContextProps.checked}\n variant={variant}\n ref={rootRef}\n mod={mod}\n attributes={attributes}\n inert={rest.inert}\n {...styleProps}\n {...wrapperProps}\n >\n <input\n {...rest}\n {...withContextProps}\n disabled={_disabled}\n checked={_checked}\n data-checked={withContextProps.checked}\n onChange={(event) => {\n withContextProps.onChange?.(event);\n handleChange(event.currentTarget.checked);\n }}\n id={uuid}\n type=\"checkbox\"\n role=\"switch\"\n inert={rest.inert}\n aria-describedby={describedBy}\n {...getStyles('input')}\n />\n\n <Box\n aria-hidden=\"true\"\n component=\"span\"\n mod={{ error, 'label-position': labelPosition, 'without-labels': !onLabel && !offLabel }}\n {...getStyles('track')}\n >\n <Box\n component=\"span\"\n mod={{ 'reduce-motion': true, 'with-thumb-indicator': withThumbIndicator && !thumbIcon }}\n {...getStyles('thumb')}\n >\n {thumbIcon}\n </Box>\n <span {...getStyles('trackLabel')}>{_checked ? onLabel : offLabel}</span>\n </Box>\n </InlineInput>\n );\n});\n\nSwitch.classes = { ...classes, ...InlineInputClasses };\nSwitch.varsResolver = varsResolver;\nSwitch.displayName = '@mantine/core/Switch';\nSwitch.Group = SwitchGroup;\n\nexport namespace Switch {\n export type Props = SwitchProps;\n export type StylesNames = SwitchStylesNames;\n export type CssVariables = SwitchCssVariables;\n export type Factory = SwitchFactory;\n\n export namespace Group {\n export type Props = SwitchGroupProps;\n export type StylesNames = SwitchGroupStylesNames;\n export type Factory = SwitchGroupFactory;\n export type Context = SwitchGroupContextValue;\n }\n}\n"],"mappings":"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"}

package/esm/components/Table/Table.components.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.components.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.components.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n FactoryPayload,\n useProps,\n} from '../../core';\nimport type { TableFactory } from './Table';\nimport { TableContextValue, useTableContext } from './Table.context';\nimport classes from './Table.module.css';\n\nexport interface TableElementProps<Selector extends string>\n extends\n BoxProps,\n CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & { stylesNames: Selector }> {}\n\nexport interface TableThProps extends TableElementProps<'th'>, ElementProps<'th'> {}\nexport interface TableTdProps extends TableElementProps<'td'>, ElementProps<'td'> {}\nexport interface TableTrProps extends TableElementProps<'tr'>, ElementProps<'tr'> {}\nexport interface TableTheadProps extends TableElementProps<'thead'>, ElementProps<'thead'> {}\nexport interface TableTbodyProps extends TableElementProps<'tbody'>, ElementProps<'tbody'> {}\nexport interface TableTfootProps extends TableElementProps<'tfoot'>, ElementProps<'tfoot'> {}\nexport interface TableCaptionProps extends TableElementProps<'caption'>, ElementProps<'caption'> {}\n\nexport type TableThFactory = Factory<{\n props: TableThProps;\n ref: HTMLTableCellElement;\n stylesNames: 'th';\n compound: true;\n}>;\n\nexport type TableTdFactory = Factory<{\n props: TableTdProps;\n ref: HTMLTableCellElement;\n stylesNames: 'td';\n compound: true;\n}>;\n\nexport type TableTrFactory = Factory<{\n props: TableTrProps;\n ref: HTMLTableRowElement;\n stylesNames: 'tr';\n compound: true;\n}>;\n\nexport type TableTheadFactory = Factory<{\n props: TableTheadProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'thead';\n compound: true;\n}>;\n\nexport type TableTbodyFactory = Factory<{\n props: TableTbodyProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'tbody';\n compound: true;\n}>;\n\nexport type TableTfootFactory = Factory<{\n props: TableTfootProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'tfoot';\n compound: true;\n}>;\n\nexport type TableCaptionFactory = Factory<{\n props: TableCaptionProps;\n ref: HTMLTableCaptionElement;\n stylesNames: 'caption';\n compound: true;\n}>;\n\ninterface TableElementOptions {\n columnBorder?: true;\n rowBorder?: true;\n striped?: true;\n highlightOnHover?: true;\n captionSide?: true;\n stickyHeader?: true;\n}\n\nfunction getDataAttributes(ctx: TableContextValue, options?: TableElementOptions) {\n if (!options) {\n return undefined;\n }\n\n const data: Record<string, boolean \| string> = {};\n\n if (options.columnBorder && ctx.withColumnBorders) {\n data['data-with-column-border'] = true;\n }\n\n if (options.rowBorder && ctx.withRowBorders) {\n data['data-with-row-border'] = true;\n }\n\n if (options.striped && ctx.striped) {\n data['data-striped'] = ctx.striped;\n }\n\n if (options.highlightOnHover && ctx.highlightOnHover) {\n data['data-hover'] = true;\n }\n\n if (options.captionSide && ctx.captionSide) {\n data['data-side'] = ctx.captionSide;\n }\n\n if (options.stickyHeader && ctx.stickyHeader) {\n data['data-sticky'] = true;\n }\n\n return data;\n}\n\nexport function tableElement<Factory extends FactoryPayload>(\n element: 'th' \| 'td' \| 'tr' \| 'thead' \| 'tbody' \| 'tfoot' \| 'caption',\n options?: TableElementOptions\n) {\n const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;\n const Component = factory<Factory>((_props) => {\n const props = useProps(name, {}, _props);\n const { classNames, className, style, styles, ...others } = props;\n\n const ctx = useTableContext();\n\n return (\n <Box\n component={element}\n {...getDataAttributes(ctx, options)}\n {...ctx.getStyles(element, { className, classNames, style, styles, props })}\n {...others}\n />\n );\n });\n\n Component.displayName = `@mantine/core/${name}`;\n Component.classes = classes;\n return Component;\n}\n\nexport const TableTh = tableElement<TableThFactory>('th', { columnBorder: true });\nexport const TableTd = tableElement<TableTdFactory>('td', { columnBorder: true });\nexport const TableTr = tableElement<TableTrFactory>('tr', {\n rowBorder: true,\n striped: true,\n highlightOnHover: true,\n});\nexport const TableThead = tableElement<TableTheadFactory>('thead', { stickyHeader: true });\nexport const TableTbody = tableElement<TableTbodyFactory>('tbody');\nexport const TableTfoot = tableElement<TableTfootFactory>('tfoot');\nexport const TableCaption = tableElement<TableCaptionFactory>('caption', { captionSide: true });\n"],"mappings":";;;;;;;;AAqFA,SAAS,kBAAkB,KAAwB,SAA+B;CAChF,IAAI,CAAC,SACH;CAGF,MAAM,OAAyC,CAAC;CAEhD,IAAI,QAAQ,gBAAgB,IAAI,mBAC9B,KAAK,6BAA6B;CAGpC,IAAI,QAAQ,aAAa,IAAI,gBAC3B,KAAK,0BAA0B;CAGjC,IAAI,QAAQ,WAAW,IAAI,SACzB,KAAK,kBAAkB,IAAI;CAG7B,IAAI,QAAQ,oBAAoB,IAAI,kBAClC,KAAK,gBAAgB;CAGvB,IAAI,QAAQ,eAAe,IAAI,aAC7B,KAAK,eAAe,IAAI;CAG1B,IAAI,QAAQ,gBAAgB,IAAI,cAC9B,KAAK,iBAAiB;CAGxB,OAAO;AACT;AAEA,SAAgB,aACd,SACA,SACA;CACA,MAAM,OAAO,QAAQ,QAAQ,OAAO,CAAC,~~EAAE~~,YAAY,IAAI,QAAQ,MAAM,CAAC;CACtE,MAAM,YAAY,SAAkB,WAAW;EAC7C,MAAM,QAAQ,SAAS,MAAM,CAAC,GAAG,MAAM;EACvC,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,GAAG,WAAW;EAE5D,MAAM,MAAM,gBAAgB;EAE5B,OACE,oBAAC,KAAD;GACE,WAAW;GACX,GAAI,kBAAkB,KAAK,OAAO;GAClC,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;IAAQ;GAAM,CAAC;GAC1E,GAAI;EACL,CAAA;CAEL,CAAC;CAED,UAAU,cAAc,iBAAiB;CACzC,UAAU,UAAUA;CACpB,OAAO;AACT;AAEA,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM;CACxD,WAAW;CACX,SAAS;CACT,kBAAkB;AACpB,CAAC;AACD,MAAa,aAAa,aAAgC,SAAS,EAAE,cAAc,KAAK,CAAC;AACzF,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,eAAe,aAAkC,WAAW,EAAE,aAAa,KAAK,CAAC"}
1	+ {"version":3,"file":"Table.components.mjs","names":["classes"],"sources":["../../../src/components/Table/Table.components.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n FactoryPayload,\n useProps,\n} from '../../core';\nimport type { TableFactory } from './Table';\nimport { TableContextValue, useTableContext } from './Table.context';\nimport classes from './Table.module.css';\n\nexport interface TableElementProps<Selector extends string>\n extends\n BoxProps,\n CompoundStylesApiProps<Omit<TableFactory, 'stylesNames'> & { stylesNames: Selector }> {}\n\nexport interface TableThProps extends TableElementProps<'th'>, ElementProps<'th'> {}\nexport interface TableTdProps extends TableElementProps<'td'>, ElementProps<'td'> {}\nexport interface TableTrProps extends TableElementProps<'tr'>, ElementProps<'tr'> {}\nexport interface TableTheadProps extends TableElementProps<'thead'>, ElementProps<'thead'> {}\nexport interface TableTbodyProps extends TableElementProps<'tbody'>, ElementProps<'tbody'> {}\nexport interface TableTfootProps extends TableElementProps<'tfoot'>, ElementProps<'tfoot'> {}\nexport interface TableCaptionProps extends TableElementProps<'caption'>, ElementProps<'caption'> {}\n\nexport type TableThFactory = Factory<{\n props: TableThProps;\n ref: HTMLTableCellElement;\n stylesNames: 'th';\n compound: true;\n}>;\n\nexport type TableTdFactory = Factory<{\n props: TableTdProps;\n ref: HTMLTableCellElement;\n stylesNames: 'td';\n compound: true;\n}>;\n\nexport type TableTrFactory = Factory<{\n props: TableTrProps;\n ref: HTMLTableRowElement;\n stylesNames: 'tr';\n compound: true;\n}>;\n\nexport type TableTheadFactory = Factory<{\n props: TableTheadProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'thead';\n compound: true;\n}>;\n\nexport type TableTbodyFactory = Factory<{\n props: TableTbodyProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'tbody';\n compound: true;\n}>;\n\nexport type TableTfootFactory = Factory<{\n props: TableTfootProps;\n ref: HTMLTableSectionElement;\n stylesNames: 'tfoot';\n compound: true;\n}>;\n\nexport type TableCaptionFactory = Factory<{\n props: TableCaptionProps;\n ref: HTMLTableCaptionElement;\n stylesNames: 'caption';\n compound: true;\n}>;\n\ninterface TableElementOptions {\n columnBorder?: true;\n rowBorder?: true;\n striped?: true;\n highlightOnHover?: true;\n captionSide?: true;\n stickyHeader?: true;\n}\n\nfunction getDataAttributes(ctx: TableContextValue, options?: TableElementOptions) {\n if (!options) {\n return undefined;\n }\n\n const data: Record<string, boolean \| string> = {};\n\n if (options.columnBorder && ctx.withColumnBorders) {\n data['data-with-column-border'] = true;\n }\n\n if (options.rowBorder && ctx.withRowBorders) {\n data['data-with-row-border'] = true;\n }\n\n if (options.striped && ctx.striped) {\n data['data-striped'] = ctx.striped;\n }\n\n if (options.highlightOnHover && ctx.highlightOnHover) {\n data['data-hover'] = true;\n }\n\n if (options.captionSide && ctx.captionSide) {\n data['data-side'] = ctx.captionSide;\n }\n\n if (options.stickyHeader && ctx.stickyHeader) {\n data['data-sticky'] = true;\n }\n\n return data;\n}\n\nexport function tableElement<Factory extends FactoryPayload>(\n element: 'th' \| 'td' \| 'tr' \| 'thead' \| 'tbody' \| 'tfoot' \| 'caption',\n options?: TableElementOptions\n) {\n const name = `Table${element.charAt(0).toUpperCase()}${element.slice(1)}`;\n const Component = factory<Factory>((_props) => {\n const props = useProps(name, {}, _props);\n const { classNames, className, style, styles, ...others } = props;\n\n const ctx = useTableContext();\n\n return (\n <Box\n component={element}\n {...getDataAttributes(ctx, options)}\n {...ctx.getStyles(element, { className, classNames, style, styles, props })}\n {...others}\n />\n );\n });\n\n Component.displayName = `@mantine/core/${name}`;\n Component.classes = classes;\n return Component;\n}\n\nexport const TableTh = tableElement<TableThFactory>('th', { columnBorder: true });\nexport const TableTd = tableElement<TableTdFactory>('td', { columnBorder: true });\nexport const TableTr = tableElement<TableTrFactory>('tr', {\n rowBorder: true,\n striped: true,\n highlightOnHover: true,\n});\nexport const TableThead = tableElement<TableTheadFactory>('thead', { stickyHeader: true });\nexport const TableTbody = tableElement<TableTbodyFactory>('tbody');\nexport const TableTfoot = tableElement<TableTfootFactory>('tfoot');\nexport const TableCaption = tableElement<TableCaptionFactory>('caption', { captionSide: true });\n"],"mappings":";;;;;;;;AAqFA,SAAS,kBAAkB,KAAwB,SAA+B;CAChF,IAAI,CAAC,SACH;CAGF,MAAM,OAAyC,CAAC;CAEhD,IAAI,QAAQ,gBAAgB,IAAI,mBAC9B,KAAK,6BAA6B;CAGpC,IAAI,QAAQ,aAAa,IAAI,gBAC3B,KAAK,0BAA0B;CAGjC,IAAI,QAAQ,WAAW,IAAI,SACzB,KAAK,kBAAkB,IAAI;CAG7B,IAAI,QAAQ,oBAAoB,IAAI,kBAClC,KAAK,gBAAgB;CAGvB,IAAI,QAAQ,eAAe,IAAI,aAC7B,KAAK,eAAe,IAAI;CAG1B,IAAI,QAAQ,gBAAgB,IAAI,cAC9B,KAAK,iBAAiB;CAGxB,OAAO;AACT;AAEA,SAAgB,aACd,SACA,SACA;CACA,MAAM,OAAO,QAAQ,QAAQ,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,QAAQ,MAAM,CAAC;CACtE,MAAM,YAAY,SAAkB,WAAW;EAC7C,MAAM,QAAQ,SAAS,MAAM,CAAC,GAAG,MAAM;EACvC,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,GAAG,WAAW;EAE5D,MAAM,MAAM,gBAAgB;EAE5B,OACE,oBAAC,KAAD;GACE,WAAW;GACX,GAAI,kBAAkB,KAAK,OAAO;GAClC,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;IAAQ;GAAM,CAAC;GAC1E,GAAI;EACL,CAAA;CAEL,CAAC;CAED,UAAU,cAAc,iBAAiB;CACzC,UAAU,UAAUA;CACpB,OAAO;AACT;AAEA,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM,EAAE,cAAc,KAAK,CAAC;AAChF,MAAa,UAAU,aAA6B,MAAM;CACxD,WAAW;CACX,SAAS;CACT,kBAAkB;AACpB,CAAC;AACD,MAAa,aAAa,aAAgC,SAAS,EAAE,cAAc,KAAK,CAAC;AACzF,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,aAAa,aAAgC,OAAO;AACjE,MAAa,eAAe,aAAkC,WAAW,EAAE,aAAa,KAAK,CAAC"}

package/esm/components/TableOfContents/TableOfContents.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableOfContents.mjs","names":["classes"],"sources":["../../../src/components/TableOfContents/TableOfContents.tsx"],"sourcesContent":["import {\n assignRef,\n useId,\n useScrollSpy,\n UseScrollSpyHeadingData,\n UseScrollSpyOptions,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getRadius,\n MantineColor,\n MantineRadius,\n MantineSize,\n noop,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../UnstyledButton';\nimport classes from './TableOfContents.module.css';\n\nexport type TableOfContentsStylesNames = 'root' \| 'control';\nexport type TableOfContentsVariant = 'filled' \| 'light' \| 'none';\nexport type TableOfContentsCssVariables = {\n root: '--toc-bg' \| '--toc-color' \| '--toc-size' \| '--toc-depth-offset' \| '--toc-radius';\n};\n\nexport interface InitialTableOfContentsData {\n /** Heading depth, 1-6 /\n depth: number;\n\n /* Heading text content value /\n value: string;\n\n /* Heading id, must be unique, used as `key` /\n id?: string;\n}\n\nexport interface TableOfContentsGetControlPropsPayload {\n /* True if the associated heading is currently the best match in the viewport /\n active: boolean;\n\n /* Data passed down from `use-scroll-spy` hook: depth, id, value /\n data: UseScrollSpyHeadingData;\n}\n\nexport interface TableOfContentsProps\n extends BoxProps, StylesApiProps<TableOfContentsFactory>, ElementProps<'div'> {\n /* Key of `theme.colors` or any valid CSS color value @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls font-size and padding of all elements @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Options passed down to `use-scroll-spy` hook /\n scrollSpyOptions?: UseScrollSpyOptions;\n\n /* Data used to render content until actual values are retrieved from the DOM /\n initialData?: InitialTableOfContentsData[];\n\n /* A function to pass props down to controls, accepts values from `use-scroll-spy` hook as an argument and active state. /\n getControlProps?: (\n payload: TableOfContentsGetControlPropsPayload\n ) => UnstyledButtonProps & ElementProps<'button'> & Record<`data-${string}`, any>;\n\n /* Minimum `depth` value that requires offset, `1` by default /\n minDepthToOffset?: number;\n\n /* Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default /\n depthOffset?: number \| string;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* A function to reinitialize headings from `use-scroll-spy` hook */\n reinitializeRef?: React.RefObject<() => void>;\n}\n\nexport type TableOfContentsFactory = Factory<{\n props: TableOfContentsProps;\n ref: HTMLDivElement;\n stylesNames: TableOfContentsStylesNames;\n vars: TableOfContentsCssVariables;\n variant: TableOfContentsVariant;\n}>;\n\nconst defaultProps = {\n getControlProps: ({ data }) => ({\n children: data.value,\n }),\n} satisfies Partial<TableOfContentsProps>;\n\nconst varsResolver = createVarsResolver<TableOfContentsFactory>(\n (theme, { color, size, variant, autoContrast, depthOffset, radius }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--toc-bg': variant !== 'none' ? colors.background : undefined,\n '--toc-color': variant !== 'none' ? colors.color : undefined,\n '--toc-size': getFontSize(size),\n '--toc-depth-offset': rem(depthOffset),\n '--toc-radius': getRadius(radius),\n },\n };\n }\n);\n\nexport const TableOfContents = factory<TableOfContentsFactory>((_props) => {\n const props = useProps('TableOfContents', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n autoContrast,\n scrollSpyOptions,\n initialData,\n getControlProps,\n minDepthToOffset,\n depthOffset,\n variant,\n radius,\n reinitializeRef,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableOfContentsFactory>({\n name: 'TableOfContents',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const idBase = useId();\n const spy = useScrollSpy(scrollSpyOptions);\n\n assignRef(reinitializeRef, spy.reinitialize);\n\n const headingsData = (\n spy.initialized ? spy.data : initialData \|\| []\n ) as UseScrollSpyHeadingData[];\n\n const controls = headingsData.map((data, index) => {\n const controlProps = getControlProps?.({\n active: index === spy.active,\n data: { ...data, getNode: data.getNode \|\| noop },\n });\n\n return (\n <UnstyledButton\n key={data.id \|\| `${idBase}-${index}`}\n __vars={{ '--depth-offset': `${data.depth - (minDepthToOffset \|\| 1)}` }}\n data-active={index === spy.active \|\| undefined}\n variant={variant}\n {...controlProps}\n {...getStyles('control', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n />\n );\n });\n\n return (\n <Box variant={variant} {...getStyles('root')} {...others}>\n {controls}\n </Box>\n );\n});\n\nTableOfContents.displayName = '@mantine/core/TableOfContents';\nTableOfContents.classes = classes;\nTableOfContents.varsResolver = varsResolver;\n\nexport namespace TableOfContents {\n export type Props = TableOfContentsProps;\n export type StylesNames = TableOfContentsStylesNames;\n export type CssVariables = TableOfContentsCssVariables;\n export type Factory = TableOfContentsFactory;\n export type Variant = TableOfContentsVariant;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgGA,MAAM,eAAe,EACnB,kBAAkB,EAAE,YAAY,EAC9B,UAAU,KAAK,MACjB,GACF;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,MAAM,SAAS,cAAc,aAAa,aAAa;CACtE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,YAAY,YAAY,SAAS,OAAO,aAAa,KAAA;EACrD,eAAe,YAAY,SAAS,OAAO,QAAQ,KAAA;EACnD,cAAc,YAAY,IAAI;EAC9B,sBAAsB,IAAI,WAAW;EACrC,gBAAgB,UAAU,MAAM;CAClC,EACF;AACF,CACF;AAEA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,cACA,kBACA,aACA,iBACA,kBACA,aACA,SACA,QACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAkC;EAClD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SAAS,MAAM;CACrB,MAAM,MAAM,aAAa,gBAAgB;CAEzC,UAAU,iBAAiB,IAAI,YAAY;CAM3C,MAAM,YAHJ,IAAI,cAAc,IAAI,OAAO,eAAe,CAAC,~~GAGjB~~,KAAK,MAAM,UAAU;EACjD,MAAM,eAAe,kBAAkB;GACrC,QAAQ,UAAU,IAAI;GACtB,MAAM;IAAE,GAAG;IAAM,SAAS,KAAK,WAAW;GAAK;EACjD,CAAC;EAED,OACE,oBAAC,gBAAD;GAEE,QAAQ,EAAE,kBAAkB,GAAG,KAAK,SAAS,oBAAoB,KAAK;GACtE,eAAa,UAAU,IAAI,UAAU,KAAA;GAC5B;GACT,GAAI;GACJ,GAAI,UAAU,WAAW;IACvB,WAAW,cAAc;IACzB,OAAO,cAAc;GACvB,CAAC;EACF,GATM,KAAK,MAAM,GAAG,OAAO,GAAG,OAS9B;CAEL,CAAC;CAED,OACE,oBAAC,KAAD;EAAc;EAAS,GAAI,UAAU,MAAM;EAAG,GAAI;YAC/C;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,cAAc;AAC9B,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe"}
1	+ {"version":3,"file":"TableOfContents.mjs","names":["classes"],"sources":["../../../src/components/TableOfContents/TableOfContents.tsx"],"sourcesContent":["import {\n assignRef,\n useId,\n useScrollSpy,\n UseScrollSpyHeadingData,\n UseScrollSpyOptions,\n} from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getFontSize,\n getRadius,\n MantineColor,\n MantineRadius,\n MantineSize,\n noop,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../UnstyledButton';\nimport classes from './TableOfContents.module.css';\n\nexport type TableOfContentsStylesNames = 'root' \| 'control';\nexport type TableOfContentsVariant = 'filled' \| 'light' \| 'none';\nexport type TableOfContentsCssVariables = {\n root: '--toc-bg' \| '--toc-color' \| '--toc-size' \| '--toc-depth-offset' \| '--toc-radius';\n};\n\nexport interface InitialTableOfContentsData {\n /** Heading depth, 1-6 /\n depth: number;\n\n /* Heading text content value /\n value: string;\n\n /* Heading id, must be unique, used as `key` /\n id?: string;\n}\n\nexport interface TableOfContentsGetControlPropsPayload {\n /* True if the associated heading is currently the best match in the viewport /\n active: boolean;\n\n /* Data passed down from `use-scroll-spy` hook: depth, id, value /\n data: UseScrollSpyHeadingData;\n}\n\nexport interface TableOfContentsProps\n extends BoxProps, StylesApiProps<TableOfContentsFactory>, ElementProps<'div'> {\n /* Key of `theme.colors` or any valid CSS color value @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls font-size and padding of all elements @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Options passed down to `use-scroll-spy` hook /\n scrollSpyOptions?: UseScrollSpyOptions;\n\n /* Data used to render content until actual values are retrieved from the DOM /\n initialData?: InitialTableOfContentsData[];\n\n /* A function to pass props down to controls, accepts values from `use-scroll-spy` hook as an argument and active state. /\n getControlProps?: (\n payload: TableOfContentsGetControlPropsPayload\n ) => UnstyledButtonProps & ElementProps<'button'> & Record<`data-${string}`, any>;\n\n /* Minimum `depth` value that requires offset, `1` by default /\n minDepthToOffset?: number;\n\n /* Controls padding on the left side of control, multiplied by (`depth` - `minDepthToOffset`), `20px` by default /\n depthOffset?: number \| string;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* A function to reinitialize headings from `use-scroll-spy` hook */\n reinitializeRef?: React.RefObject<() => void>;\n}\n\nexport type TableOfContentsFactory = Factory<{\n props: TableOfContentsProps;\n ref: HTMLDivElement;\n stylesNames: TableOfContentsStylesNames;\n vars: TableOfContentsCssVariables;\n variant: TableOfContentsVariant;\n}>;\n\nconst defaultProps = {\n getControlProps: ({ data }) => ({\n children: data.value,\n }),\n} satisfies Partial<TableOfContentsProps>;\n\nconst varsResolver = createVarsResolver<TableOfContentsFactory>(\n (theme, { color, size, variant, autoContrast, depthOffset, radius }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--toc-bg': variant !== 'none' ? colors.background : undefined,\n '--toc-color': variant !== 'none' ? colors.color : undefined,\n '--toc-size': getFontSize(size),\n '--toc-depth-offset': rem(depthOffset),\n '--toc-radius': getRadius(radius),\n },\n };\n }\n);\n\nexport const TableOfContents = factory<TableOfContentsFactory>((_props) => {\n const props = useProps('TableOfContents', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n autoContrast,\n scrollSpyOptions,\n initialData,\n getControlProps,\n minDepthToOffset,\n depthOffset,\n variant,\n radius,\n reinitializeRef,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TableOfContentsFactory>({\n name: 'TableOfContents',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const idBase = useId();\n const spy = useScrollSpy(scrollSpyOptions);\n\n assignRef(reinitializeRef, spy.reinitialize);\n\n const headingsData = (\n spy.initialized ? spy.data : initialData \|\| []\n ) as UseScrollSpyHeadingData[];\n\n const controls = headingsData.map((data, index) => {\n const controlProps = getControlProps?.({\n active: index === spy.active,\n data: { ...data, getNode: data.getNode \|\| noop },\n });\n\n return (\n <UnstyledButton\n key={data.id \|\| `${idBase}-${index}`}\n __vars={{ '--depth-offset': `${data.depth - (minDepthToOffset \|\| 1)}` }}\n data-active={index === spy.active \|\| undefined}\n variant={variant}\n {...controlProps}\n {...getStyles('control', {\n className: controlProps?.className,\n style: controlProps?.style,\n })}\n />\n );\n });\n\n return (\n <Box variant={variant} {...getStyles('root')} {...others}>\n {controls}\n </Box>\n );\n});\n\nTableOfContents.displayName = '@mantine/core/TableOfContents';\nTableOfContents.classes = classes;\nTableOfContents.varsResolver = varsResolver;\n\nexport namespace TableOfContents {\n export type Props = TableOfContentsProps;\n export type StylesNames = TableOfContentsStylesNames;\n export type CssVariables = TableOfContentsCssVariables;\n export type Factory = TableOfContentsFactory;\n export type Variant = TableOfContentsVariant;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgGA,MAAM,eAAe,EACnB,kBAAkB,EAAE,YAAY,EAC9B,UAAU,KAAK,MACjB,GACF;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,OAAO,MAAM,SAAS,cAAc,aAAa,aAAa;CACtE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,YAAY,YAAY,SAAS,OAAO,aAAa,KAAA;EACrD,eAAe,YAAY,SAAS,OAAO,QAAQ,KAAA;EACnD,cAAc,YAAY,IAAI;EAC9B,sBAAsB,IAAI,WAAW;EACrC,gBAAgB,UAAU,MAAM;CAClC,EACF;AACF,CACF;AAEA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,cACA,kBACA,aACA,iBACA,kBACA,aACA,SACA,QACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAkC;EAClD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,SAAS,MAAM;CACrB,MAAM,MAAM,aAAa,gBAAgB;CAEzC,UAAU,iBAAiB,IAAI,YAAY;CAM3C,MAAM,YAHJ,IAAI,cAAc,IAAI,OAAO,eAAe,CAAC,EAAA,CAGjB,KAAK,MAAM,UAAU;EACjD,MAAM,eAAe,kBAAkB;GACrC,QAAQ,UAAU,IAAI;GACtB,MAAM;IAAE,GAAG;IAAM,SAAS,KAAK,WAAW;GAAK;EACjD,CAAC;EAED,OACE,oBAAC,gBAAD;GAEE,QAAQ,EAAE,kBAAkB,GAAG,KAAK,SAAS,oBAAoB,KAAK;GACtE,eAAa,UAAU,IAAI,UAAU,KAAA;GAC5B;GACT,GAAI;GACJ,GAAI,UAAU,WAAW;IACvB,WAAW,cAAc;IACzB,OAAO,cAAc;GACvB,CAAC;EACF,GATM,KAAK,MAAM,GAAG,OAAO,GAAG,OAS9B;CAEL,CAAC;CAED,OACE,oBAAC,KAAD;EAAc;EAAS,GAAI,UAAU,MAAM;EAAG,GAAI;YAC/C;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,cAAc;AAC9B,gBAAgB,UAAUA;AAC1B,gBAAgB,eAAe"}

package/esm/components/Tabs/Tabs.context.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.context.mjs","names":[],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n id: string;\n value: string \| null;\n orientation: 'horizontal' \| 'vertical' \| undefined;\n loop: boolean \| undefined;\n activateTabWithKeyboard: boolean \| undefined;\n allowTabDeactivation: boolean \| undefined;\n onChange: (value: string \| null) => void;\n getTabId: (value: string) => string;\n getPanelId: (value: string) => string;\n variant: string \| undefined;\n color: string \| undefined;\n radius: string \| number \| undefined;\n inverted: boolean \| undefined;\n keepMounted: boolean \| undefined;\n keepMountedMode: 'activity' \| 'display-none' \| undefined;\n placement: 'right' \| 'left' \| undefined;\n unstyled: boolean \| undefined;\n getStyles: GetStylesApi<TabsFactory>;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n 'Tabs component was not found in the tree'\n);\n"],"mappings":";;;~~AAwBA~~,MAAa,CAAC,cAAc,kBAAkB,kBAC5C,0CACF"}
1	+ {"version":3,"file":"Tabs.context.mjs","names":[],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n id: string;\n value: string \| null;\n orientation: 'horizontal' \| 'vertical' \| undefined;\n loop: boolean \| undefined;\n activateTabWithKeyboard: boolean \| undefined;\n allowTabDeactivation: boolean \| undefined;\n onChange: (value: string \| null) => void;\n getTabId: (value: string) => string;\n getPanelId: (value: string) => string;\n variant: string \| undefined;\n color: string \| undefined;\n radius: string \| number \| undefined;\n inverted: boolean \| undefined;\n keepMounted: boolean \| undefined;\n keepMountedMode: 'activity' \| 'display-none' \| undefined;\n placement: 'right' \| 'left' \| undefined;\n unstyled: boolean \| undefined;\n getStyles: GetStylesApi<TabsFactory>;\n mountedPanels: React.RefObject<Set<string>>;\n setMountedPanel: (value: string, mounted: boolean) => void;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n 'Tabs component was not found in the tree'\n);\n"],"mappings":";;;AA0BA,MAAa,CAAC,cAAc,kBAAkB,kBAC5C,0CACF"}

package/esm/components/Tabs/Tabs.mjs CHANGED Viewed

@@ -14,7 +14,8 @@ import Tabs_module_default from "./Tabs.module.mjs";
 import { TabsList } from "./TabsList/TabsList.mjs";
 import { TabsPanel } from "./TabsPanel/TabsPanel.mjs";
 import { TabsTab } from "./TabsTab/TabsTab.mjs";
-import { useId, useUncontrolled } from "@mantine/hooks";
+import { useCallback, useRef } from "react";
+import { useForceUpdate, useId as useId$1, useUncontrolled } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Tabs/Tabs.tsx
 const VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
@@ -39,7 +40,19 @@ const varsResolver = createVarsResolver((theme, { radius, color, autoContrast })
 const Tabs = factory((_props) => {
 	const props = useProps("Tabs", defaultProps, _props);
 	const { defaultValue, value, onChange, orientation, children, loop, id, activateTabWithKeyboard, allowTabDeactivation, variant, color, radius, inverted, placement, keepMounted, keepMountedMode, classNames, styles, unstyled, className, style, vars, autoContrast, mod, attributes, ...others } = props;
-	const uid = useId(id);
+	const uid = useId$1(id);
+	const mountedPanels = useRef(/* @__PURE__ */ new Set());
+	const forceUpdate = useForceUpdate();
+	const setMountedPanel = useCallback((panelValue, mounted) => {
+		const panels = mountedPanels.current;
+		if (mounted && !panels.has(panelValue)) {
+			panels.add(panelValue);
+			forceUpdate();
+		} else if (!mounted && panels.has(panelValue)) {
+			panels.delete(panelValue);
+			forceUpdate();
+		}
+	}, []);
 	const [currentTab, setCurrentTab] = useUncontrolled({
 		value,
 		defaultValue,
@@ -78,7 +91,9 @@ const Tabs = factory((_props) => {
 			keepMounted,
 			keepMountedMode,
 			unstyled,
-			getStyles
+			getStyles,
+			mountedPanels,
+			setMountedPanel
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			id: uid,

package/esm/components/Tabs/Tabs.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.mjs","names":["classes"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSafeId,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n \| 'root'\n \| TabsListStylesNames\n \| TabsPanelStylesNames\n \| TabsTabStylesNames;\n\nexport type TabsVariant = 'default' \| 'outline' \| 'pills';\nexport type TabsCssVariables = {\n root: '--tabs-color' \| '--tabs-radius';\n};\n\nexport interface TabsProps\n extends\n BoxProps,\n StylesApiProps<TabsFactory>,\n ElementProps<'div', 'defaultValue' \| 'value' \| 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: string \| null;\n\n /* Controlled component value /\n value?: string \| null;\n\n /* Called when value changes /\n onChange?: (value: string \| null) => void;\n\n /* Tabs orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' /\n placement?: 'left' \| 'right';\n\n /* Base id, used to generate ids to connect labels with controls, generated randomly by default /\n id?: string;\n\n /* If set, arrow key presses loop though items (first to last and last to first) @default true /\n loop?: boolean;\n\n /* If set, tab is activated with arrow key press @default true /\n activateTabWithKeyboard?: boolean;\n\n /* If set, tab can be deactivated @default false /\n allowTabDeactivation?: boolean;\n\n /* Tabs content /\n children?: React.ReactNode;\n\n /* Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Determines whether tabs should have inverted styles @default false /\n inverted?: boolean;\n\n /* If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true /\n keepMounted?: boolean;\n\n /* Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* If set, adjusts text color based on background color for `pills` variant */\n autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n props: TabsProps;\n ref: HTMLDivElement;\n variant: TabsVariant;\n stylesNames: TabsStylesNames;\n vars: TabsCssVariables;\n staticComponents: {\n Tab: typeof TabsTab;\n Panel: typeof TabsPanel;\n List: typeof TabsList;\n };\n}>;\n\nconst VALUE_ERROR =\n 'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'activity',\n orientation: 'horizontal',\n loop: true,\n activateTabWithKeyboard: true,\n variant: 'default',\n placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n root: {\n '--tabs-radius': getRadius(radius),\n '--tabs-color': getThemeColor(color, theme),\n '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n const props = useProps('Tabs', defaultProps, _props);\n const {\n defaultValue,\n value,\n onChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted,\n keepMountedMode,\n classNames,\n styles,\n unstyled,\n className,\n style,\n vars,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const uid = useId(id);\n\n const [currentTab, setCurrentTab] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const getStyles = useStyles<TabsFactory>({\n name: 'Tabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <TabsProvider\n value={{\n placement,\n value: currentTab,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n onChange: setCurrentTab,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n keepMountedMode,\n unstyled,\n getStyles,\n }}\n >\n <Box\n id={uid}\n variant={variant}\n mod={[\n {\n orientation,\n inverted: orientation === 'horizontal' && inverted,\n placement: orientation === 'vertical' && placement,\n },\n mod,\n ]}\n {...getStyles('root')}\n {...others}\n >\n {children}\n </Box>\n </TabsProvider>\n );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n export type Props = TabsProps;\n export type StylesNames = TabsStylesNames;\n export type CssVariables = TabsCssVariables;\n export type Factory = TabsFactory;\n export type Variant = TabsVariant;\n export type ContextValue = TabsContextValue;\n\n export namespace Tab {\n export type Props = TabsTabProps;\n export type StylesNames = TabsTabStylesNames;\n }\n\n export namespace Panel {\n export type Props = TabsPanelProps;\n export type StylesNames = TabsPanelStylesNames;\n }\n\n export namespace List {\n export type Props = TabsListProps;\n export type StylesNames = TabsListStylesNames;\n }\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;AAsGA~~,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiB,UAAU,MAAM;CACjC,gBAAgB,cAAc,OAAO,KAAK;CAC1C,qBAAqB,qBAAqB,cAAc,KAAK,IACzD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAM,MAAM,~~EAAE~~;~~CAEpB~~,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;EAClD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAU,UAAU,GAAG,IAAI,OAAO,WAAW;GAC7C,YAAY,UAAU,GAAG,IAAI,SAAS,WAAW;GACjD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;GAC3C,GACA,GACF;GACA,GAAI,UAAU,MAAM;GACpB,GAAI;GAEH;EACE,CAAA;CACO,CAAA;AAElB,CAAC;AAED,KAAK,~~UAAUA~~;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,QAAQ;AACb,KAAK,OAAO"}
1	+ {"version":3,"file":"Tabs.mjs","names":["useId","classes"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { useForceUpdate, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSafeId,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n \| 'root'\n \| TabsListStylesNames\n \| TabsPanelStylesNames\n \| TabsTabStylesNames;\n\nexport type TabsVariant = 'default' \| 'outline' \| 'pills';\nexport type TabsCssVariables = {\n root: '--tabs-color' \| '--tabs-radius';\n};\n\nexport interface TabsProps\n extends\n BoxProps,\n StylesApiProps<TabsFactory>,\n ElementProps<'div', 'defaultValue' \| 'value' \| 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: string \| null;\n\n /* Controlled component value /\n value?: string \| null;\n\n /* Called when value changes /\n onChange?: (value: string \| null) => void;\n\n /* Tabs orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' /\n placement?: 'left' \| 'right';\n\n /* Base id, used to generate ids to connect labels with controls, generated randomly by default /\n id?: string;\n\n /* If set, arrow key presses loop though items (first to last and last to first) @default true /\n loop?: boolean;\n\n /* If set, tab is activated with arrow key press @default true /\n activateTabWithKeyboard?: boolean;\n\n /* If set, tab can be deactivated @default false /\n allowTabDeactivation?: boolean;\n\n /* Tabs content /\n children?: React.ReactNode;\n\n /* Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Determines whether tabs should have inverted styles @default false /\n inverted?: boolean;\n\n /* If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true /\n keepMounted?: boolean;\n\n /* Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* If set, adjusts text color based on background color for `pills` variant */\n autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n props: TabsProps;\n ref: HTMLDivElement;\n variant: TabsVariant;\n stylesNames: TabsStylesNames;\n vars: TabsCssVariables;\n staticComponents: {\n Tab: typeof TabsTab;\n Panel: typeof TabsPanel;\n List: typeof TabsList;\n };\n}>;\n\nconst VALUE_ERROR =\n 'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'activity',\n orientation: 'horizontal',\n loop: true,\n activateTabWithKeyboard: true,\n variant: 'default',\n placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n root: {\n '--tabs-radius': getRadius(radius),\n '--tabs-color': getThemeColor(color, theme),\n '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n const props = useProps('Tabs', defaultProps, _props);\n const {\n defaultValue,\n value,\n onChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted,\n keepMountedMode,\n classNames,\n styles,\n unstyled,\n className,\n style,\n vars,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const uid = useId(id);\n const mountedPanels = useRef(new Set<string>());\n const forceUpdate = useForceUpdate();\n\n const setMountedPanel = useCallback((panelValue: string, mounted: boolean) => {\n const panels = mountedPanels.current;\n if (mounted && !panels.has(panelValue)) {\n panels.add(panelValue);\n forceUpdate();\n } else if (!mounted && panels.has(panelValue)) {\n panels.delete(panelValue);\n forceUpdate();\n }\n }, []);\n\n const [currentTab, setCurrentTab] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const getStyles = useStyles<TabsFactory>({\n name: 'Tabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <TabsProvider\n value={{\n placement,\n value: currentTab,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n onChange: setCurrentTab,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n keepMountedMode,\n unstyled,\n getStyles,\n mountedPanels,\n setMountedPanel,\n }}\n >\n <Box\n id={uid}\n variant={variant}\n mod={[\n {\n orientation,\n inverted: orientation === 'horizontal' && inverted,\n placement: orientation === 'vertical' && placement,\n },\n mod,\n ]}\n {...getStyles('root')}\n {...others}\n >\n {children}\n </Box>\n </TabsProvider>\n );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n export type Props = TabsProps;\n export type StylesNames = TabsStylesNames;\n export type CssVariables = TabsCssVariables;\n export type Factory = TabsFactory;\n export type Variant = TabsVariant;\n export type ContextValue = TabsContextValue;\n\n export namespace Tab {\n export type Props = TabsTabProps;\n export type StylesNames = TabsTabStylesNames;\n }\n\n export namespace Panel {\n export type Props = TabsPanelProps;\n export type StylesNames = TabsPanelStylesNames;\n }\n\n export namespace List {\n export type Props = TabsListProps;\n export type StylesNames = TabsListStylesNames;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiB,UAAU,MAAM;CACjC,gBAAgB,cAAc,OAAO,KAAK;CAC1C,qBAAqB,qBAAqB,cAAc,KAAK,IACzD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,gBAAgB,uBAAO,IAAI,IAAY,CAAC;CAC9C,MAAM,cAAc,eAAe;CAEnC,MAAM,kBAAkB,aAAa,YAAoB,YAAqB;EAC5E,MAAM,SAAS,cAAc;EAC7B,IAAI,WAAW,CAAC,OAAO,IAAI,UAAU,GAAG;GACtC,OAAO,IAAI,UAAU;GACrB,YAAY;EACd,OAAO,IAAI,CAAC,WAAW,OAAO,IAAI,UAAU,GAAG;GAC7C,OAAO,OAAO,UAAU;GACxB,YAAY;EACd;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;EAClD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAU,UAAU,GAAG,IAAI,OAAO,WAAW;GAC7C,YAAY,UAAU,GAAG,IAAI,SAAS,WAAW;GACjD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;GAC3C,GACA,GACF;GACA,GAAI,UAAU,MAAM;GACpB,GAAI;GAEH;EACE,CAAA;CACO,CAAA;AAElB,CAAC;AAED,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,QAAQ;AACb,KAAK,OAAO"}

package/esm/components/Tabs/TabsPanel/TabsPanel.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { factory } from "../../../core/factory/factory.mjs";
 import { Box } from "../../../core/Box/Box.mjs";
 import { useTabsContext } from "../Tabs.context.mjs";
 import Tabs_module_default from "../Tabs.module.mjs";
-import { Activity } from "react";
+import { Activity, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Tabs/TabsPanel/TabsPanel.tsx
 const TabsPanel = factory((_props) => {
@@ -13,6 +13,12 @@ const TabsPanel = factory((_props) => {
 	const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } = props;
 	const env = useMantineEnv();
 	const ctx = useTabsContext();
+	useEffect(() => {
+		ctx.setMountedPanel(value, true);
+		return () => {
+			ctx.setMountedPanel(value, false);
+		};
+	}, [value]);
 	const active = ctx.value === value;
 	const shouldKeepMounted = ctx.keepMounted || keepMounted;
 	const useActivity = ctx.keepMountedMode !== "display-none";

package/esm/components/Tabs/TabsPanel/TabsPanel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsPanel.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useMantineEnv,\n useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n /** Panel content /\n children: React.ReactNode;\n\n /* If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component /\n keepMounted?: boolean;\n\n /* Value of associated control */\n value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n props: TabsPanelProps;\n ref: HTMLDivElement;\n stylesNames: TabsPanelStylesNames;\n compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n const props = useProps('TabsPanel', null, _props);\n const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n props;\n\n const env = useMantineEnv();\n const ctx = useTabsContext();\n\n const active = ctx.value === value;\n const shouldKeepMounted = ctx.keepMounted \|\| keepMounted;\n const useActivity = ctx.keepMountedMode !== 'display-none';\n const content =\n shouldKeepMounted && useActivity && env !== 'test' ? (\n <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n ) : shouldKeepMounted ? (\n children\n ) : active ? (\n children\n ) : null;\n\n return (\n <Box\n {...ctx.getStyles('panel', {\n className,\n classNames,\n styles,\n style: [style, !active ? { display: 'none' } : undefined],\n props,\n })}\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"tabpanel\"\n id={ctx.getPanelId(value)}\n aria-labelledby={ctx.getTabId(value)}\n {...others}\n >\n {content}\n </Box>\n );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;AAmCA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,eAAe;CAE3B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,oBAAC,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;YAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc"}
1	+ {"version":3,"file":"TabsPanel.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity, useEffect } from 'react';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useMantineEnv,\n useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n /** Panel content /\n children: React.ReactNode;\n\n /* If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component /\n keepMounted?: boolean;\n\n /* Value of associated control */\n value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n props: TabsPanelProps;\n ref: HTMLDivElement;\n stylesNames: TabsPanelStylesNames;\n compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n const props = useProps('TabsPanel', null, _props);\n const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n props;\n\n const env = useMantineEnv();\n const ctx = useTabsContext();\n\n useEffect(() => {\n ctx.setMountedPanel(value, true);\n return () => {\n ctx.setMountedPanel(value, false);\n };\n }, [value]);\n\n const active = ctx.value === value;\n const shouldKeepMounted = ctx.keepMounted \|\| keepMounted;\n const useActivity = ctx.keepMountedMode !== 'display-none';\n const content =\n shouldKeepMounted && useActivity && env !== 'test' ? (\n <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n ) : shouldKeepMounted ? (\n children\n ) : active ? (\n children\n ) : null;\n\n return (\n <Box\n {...ctx.getStyles('panel', {\n className,\n classNames,\n styles,\n style: [style, !active ? { display: 'none' } : undefined],\n props,\n })}\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"tabpanel\"\n id={ctx.getPanelId(value)}\n aria-labelledby={ctx.getTabId(value)}\n {...others}\n >\n {content}\n </Box>\n );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;AAmCA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,eAAe;CAE3B,gBAAgB;EACd,IAAI,gBAAgB,OAAO,IAAI;EAC/B,aAAa;GACX,IAAI,gBAAgB,OAAO,KAAK;EAClC;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,oBAAC,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;YAEH;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc"}

package/esm/components/Tabs/TabsTab/TabsTab.mjs CHANGED Viewed

@@ -47,7 +47,7 @@ const TabsTab = factory((_props) => {
 		id: ctx.getTabId(value),
 		"aria-selected": active,
 		tabIndex: tabIndex !== void 0 ? tabIndex : active || ctx.value === null ? 0 : -1,
-		"aria-controls": ctx.getPanelId(value),
+		"aria-controls": ctx.mountedPanels.current.has(value) ? ctx.getPanelId(value) : void 0,
 		onClick: activateTab,
 		__vars: { "--tabs-color": color ? getThemeColor(color, theme) : void 0 },
 		onKeyDown: createScopedKeydownHandler({

package/esm/components/Tabs/TabsTab/TabsTab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsTab.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n CompoundStylesApiProps,\n createScopedKeydownHandler,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' \| 'tabSection' \| 'tabLabel';\n\nexport interface TabsTabProps\n extends\n Omit<UnstyledButtonProps, 'classNames' \| 'styles' \| 'vars'>,\n CompoundStylesApiProps<TabsTabFactory>,\n ElementProps<'button'> {\n /** Value of associated panel /\n value: string;\n\n /* Tab label /\n children?: React.ReactNode;\n\n /* Content displayed on the right side of the label /\n rightSection?: React.ReactNode;\n\n /* Content displayed on the left side of the label /\n leftSection?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n props: TabsTabProps;\n ref: HTMLButtonElement;\n stylesNames: TabsTabStylesNames;\n compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n const props = useProps('TabsTab', null, _props);\n const {\n className,\n children,\n rightSection,\n leftSection,\n value,\n onClick,\n onKeyDown,\n disabled,\n color,\n style,\n classNames,\n styles,\n vars,\n mod,\n tabIndex,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const ctx = useTabsContext();\n const active = value === ctx.value;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n const stylesApiProps = { classNames, styles, props };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n disabled={disabled}\n unstyled={ctx.unstyled}\n variant={ctx.variant}\n mod={[\n {\n active,\n disabled,\n orientation: ctx.orientation,\n inverted: ctx.inverted,\n placement: ctx.orientation === 'vertical' && ctx.placement,\n },\n mod,\n ]}\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={active}\n tabIndex={tabIndex !== undefined ? tabIndex : active \|\| ctx.value === null ? 0 : -1}\n aria-controls={ctx.getPanelId(value)}\n onClick={activateTab}\n __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[role=\"tab\"]',\n parentSelector: '[role=\"tablist\"]',\n activateOnFocus: ctx.activateTabWithKeyboard,\n loop: ctx.loop,\n orientation: ctx.orientation \|\| 'horizontal',\n dir,\n onKeyDown,\n })}\n {...others}\n >\n {leftSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n {leftSection}\n </span>\n )}\n {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n {rightSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n {rightSection}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,WAAW,KAAK;~~EACnC~~,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;YA/BN;GAiCG,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;GAEP,YAAY,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc"}
1	+ {"version":3,"file":"TabsTab.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n CompoundStylesApiProps,\n createScopedKeydownHandler,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' \| 'tabSection' \| 'tabLabel';\n\nexport interface TabsTabProps\n extends\n Omit<UnstyledButtonProps, 'classNames' \| 'styles' \| 'vars'>,\n CompoundStylesApiProps<TabsTabFactory>,\n ElementProps<'button'> {\n /** Value of associated panel /\n value: string;\n\n /* Tab label /\n children?: React.ReactNode;\n\n /* Content displayed on the right side of the label /\n rightSection?: React.ReactNode;\n\n /* Content displayed on the left side of the label /\n leftSection?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n props: TabsTabProps;\n ref: HTMLButtonElement;\n stylesNames: TabsTabStylesNames;\n compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n const props = useProps('TabsTab', null, _props);\n const {\n className,\n children,\n rightSection,\n leftSection,\n value,\n onClick,\n onKeyDown,\n disabled,\n color,\n style,\n classNames,\n styles,\n vars,\n mod,\n tabIndex,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const ctx = useTabsContext();\n const active = value === ctx.value;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n const stylesApiProps = { classNames, styles, props };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n disabled={disabled}\n unstyled={ctx.unstyled}\n variant={ctx.variant}\n mod={[\n {\n active,\n disabled,\n orientation: ctx.orientation,\n inverted: ctx.inverted,\n placement: ctx.orientation === 'vertical' && ctx.placement,\n },\n mod,\n ]}\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={active}\n tabIndex={tabIndex !== undefined ? tabIndex : active \|\| ctx.value === null ? 0 : -1}\n aria-controls={ctx.mountedPanels.current.has(value) ? ctx.getPanelId(value) : undefined}\n onClick={activateTab}\n __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[role=\"tab\"]',\n parentSelector: '[role=\"tablist\"]',\n activateOnFocus: ctx.activateTabWithKeyboard,\n loop: ctx.loop,\n orientation: ctx.orientation \|\| 'horizontal',\n dir,\n onKeyDown,\n })}\n {...others}\n >\n {leftSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n {leftSection}\n </span>\n )}\n {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n {rightSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n {rightSection}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,cAAc,QAAQ,IAAI,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,KAAA;EAC9E,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;YA/BN;GAiCG,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;GAEP,YAAY,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;cAClE;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc"}