npm - @mantine/core - Versions diffs - 9.0.0 → 9.0.2 - Mend

@mantine/core 9.0.0 → 9.0.2

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 (474) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Code.mjs","names":["classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. /\n color?: MantineColor;\n\n /* If set, code is rendered in `pre` */\n block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n props: CodeProps;\n ref: HTMLElement;\n stylesNames: CodeStylesNames;\n vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n root: {\n '--code-bg': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n const props = useProps('Code', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n block,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeFactory>({\n name: 'Code',\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 <Box<any>\n component={block ? 'pre' : 'code'}\n mod={[{ block }, mod]}\n {...getStyles('root')}\n {...others}\n dir=\"ltr\"\n />\n );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}
1	+ {"version":3,"file":"Code.mjs","names":["classes"],"sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Code.module.css';\n\nexport type CodeStylesNames = 'root';\nexport type CodeCssVariables = {\n root: '--code-bg';\n};\n\nexport interface CodeProps extends BoxProps, StylesApiProps<CodeFactory>, ElementProps<'code'> {\n /** Key of `theme.colors` or any valid CSS color, controls `background-color` of the code. By default, calculated based on the color scheme. /\n color?: MantineColor;\n\n /* If set, code is rendered in `pre` */\n block?: boolean;\n}\n\nexport type CodeFactory = Factory<{\n props: CodeProps;\n ref: HTMLElement;\n stylesNames: CodeStylesNames;\n vars: CodeCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<CodeFactory>((theme, { color }) => ({\n root: {\n '--code-bg': color ? getThemeColor(color, theme) : undefined,\n },\n}));\n\nexport const Code = factory<CodeFactory>((_props) => {\n const props = useProps('Code', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n block,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CodeFactory>({\n name: 'Code',\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 <Box<any>\n component={block ? 'pre' : 'code'}\n mod={[{ block }, mod]}\n {...getStyles('root')}\n {...others}\n dir=\"ltr\"\n />\n );\n});\n\nCode.classes = classes;\nCode.varsResolver = varsResolver;\nCode.displayName = '@mantine/core/Code';\n\nexport namespace Code {\n export type Props = CodeProps;\n export type CssVariables = CodeCssVariables;\n export type Factory = CodeFactory;\n export type StylesNames = CodeStylesNames;\n}\n"],"mappings":";;;;;;;;;;AAmCA,MAAM,eAAe,oBAAiC,OAAO,EAAE,aAAa,EAC1E,MAAM,EACJ,aAAa,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA,GACpD,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,WAAW,QAAQ,QAAQ;EAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,IAAI;EACrB,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,KAAI;EACJ,CAAA;EAEJ;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAM,eAAe;CAC3B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,qBAAqB,kBAAkB;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}
1	+ {"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n export type Props = CollapseProps;\n export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACd;AAED,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,MAAM;CAE7C,MAAM,MAAM,eAAe;CAC3B,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,qBAAqB,kBAAkB;CAE7C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;EACd,CAAC;AAEF,KAAI,aAAa,GAAG;AAClB,MAAI,gBAAgB,QAAQ,QAAQ,OAClC,QACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;IAAe,CAAA;GACxB,CAAA;AAGf,SAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;GAAe,CAAA,GAAG;;CAGxD,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;AACJ,KAAI,gBAAgB,MAClB,WAAU,WAAW,OAAO;UACnB,gBAAgB,KACzB,WAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;EAAoB,CAAA;KAEhF,WAAU;AAGZ,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,MAAM;IAChC;GACD;GACD,CAAC;YAED;EACG,CAAA;EAER;AAEF,SAAS,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n __ColorPickerProps,\n ColorPicker,\n ColorPickerStylesNames,\n convertHsvaTo,\n isColorValid,\n parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n \| 'dropdown'\n \| 'eyeDropperButton'\n \| 'eyeDropperIcon'\n \| 'colorPreview'\n \| ColorPickerStylesNames\n \| __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n eyeDropperIcon: '--ci-eye-dropper-icon-size';\n eyeDropperButton: '--ci-button-size';\n colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n extends\n BoxProps,\n __BaseInputProps,\n __ColorPickerProps,\n StylesApiProps<ColorInputFactory>,\n ElementProps<'input', 'size' \| 'onChange' \| 'value' \| 'defaultValue'> {\n /** If input is not allowed, the user can only pick value with color picker and swatches /\n disallowInput?: boolean;\n\n /* If set, the input value resets to the last known valid value when the input loses focus @default true /\n fixOnBlur?: boolean;\n\n /* Props passed down to the `Popover` component /\n popoverProps?: PopoverProps;\n\n /* If set, the preview color swatch is displayed in the left section of the input @default true /\n withPreview?: boolean;\n\n /* If set, the eye dropper button is displayed in the right section @default true /\n withEyeDropper?: boolean;\n\n /* An icon to replace the default eye dropper icon /\n eyeDropperIcon?: React.ReactNode;\n\n /* If set, the dropdown is closed when one of the color swatches is clicked @default false /\n closeOnColorSwatchClick?: boolean;\n\n /* Props passed down to the eye dropper button */\n eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n props: ColorInputProps;\n ref: HTMLInputElement;\n stylesNames: ColorInputStylesNames;\n vars: ColorInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 7,\n withPicker: true,\n popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n withEyeDropper: true,\n size: 'sm',\n leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n eyeDropperIcon: {\n '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n },\n\n eyeDropperButton: {\n '--ci-button-size': getSize(size, 'ci-button-size'),\n },\n\n colorPreview: {\n '--ci-preview-size': getSize(size, 'ci-preview-size'),\n },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n const props = useProps('ColorInput', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n disallowInput,\n fixOnBlur,\n popoverProps,\n withPreview,\n withEyeDropper,\n eyeDropperIcon,\n closeOnColorSwatchClick,\n eyeDropperButtonProps,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n onClick,\n onFocus,\n onBlur,\n inputProps,\n format = 'hex',\n wrapperProps,\n readOnly,\n withPicker,\n swatches,\n disabled,\n leftSection,\n rightSection,\n swatchesPerRow,\n ...others\n } = useInputProps('ColorInput', defaultProps, _props);\n\n const getStyles = useStyles<ColorInputFactory>({\n name: 'ColorInput',\n props,\n classes,\n classNames,\n styles,\n unstyled,\n rootSelector: 'wrapper',\n vars: props.vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n const eyeDropper = (\n <ActionIcon\n {...eyeDropperButtonProps}\n {...getStyles('eyeDropperButton', {\n className: eyeDropperButtonProps?.className,\n style: eyeDropperButtonProps?.style,\n })}\n variant=\"subtle\"\n color=\"gray\"\n unstyled={unstyled}\n onClick={() =>\n openEyeDropper()\n .then((payload) => {\n if (payload?.sRGBHex) {\n const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n setValue(color);\n onChangeEnd?.(color);\n }\n })\n .catch(() => {})\n }\n >\n {eyeDropperIcon \|\| <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n </ActionIcon>\n );\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n fixOnBlur && setValue(lastValidValue);\n onBlur?.(event);\n setDropdownOpened(false);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n onClick?.(event);\n setDropdownOpened(true);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <Input.Wrapper\n {...wrapperProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"ColorInput\"\n >\n <Popover\n __staticSelector=\"ColorInput\"\n position=\"bottom-start\"\n offset={5}\n opened={dropdownOpened}\n {...popoverProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n withRoles={false}\n disabled={\n readOnly \|\| (withPicker === false && (!Array.isArray(swatches) \|\| swatches.length === 0))\n }\n >\n <Popover.Target>\n <Input<'input'>\n autoComplete=\"off\"\n {...others}\n {...inputProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n disabled={disabled}\n __staticSelector=\"ColorInput\"\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onClick={handleInputClick}\n spellCheck={false}\n value={_value}\n onChange={(event) => {\n const inputValue = event.currentTarget.value;\n setValue(inputValue);\n if (isColorValid(inputValue)) {\n onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n }\n }}\n leftSection={\n leftSection \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size=\"var(--ci-preview-size)\"\n {...getStyles('colorPreview')}\n />\n ) : null)\n }\n readOnly={disallowInput \|\| readOnly}\n pointer={disallowInput}\n unstyled={unstyled}\n rightSection={\n rightSection \|\|\n (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n }\n />\n </Popover.Target>\n\n <Popover.Dropdown\n onMouseDown={(event) => event.preventDefault()}\n className={classes.dropdown}\n >\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n onChangeEnd={onChangeEnd}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={inputProps.size}\n focusable={false}\n unstyled={unstyled}\n styles={resolvedStyles}\n classNames={resolvedClassNames}\n onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n attributes={wrapperProps.attributes}\n />\n </Popover.Dropdown>\n </Popover>\n </Input.Wrapper>\n );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ColorInput.mjs","names":["classes"],"sources":["../../../src/components/ColorInput/ColorInput.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDidUpdate, useEyeDropper, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport { ActionIcon } from '../ActionIcon';\nimport {\n __ColorPickerProps,\n ColorPicker,\n ColorPickerStylesNames,\n convertHsvaTo,\n isColorValid,\n parseColor,\n} from '../ColorPicker';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { __BaseInputProps, __InputStylesNames, Input, InputVariant, useInputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Popover, PopoverProps } from '../Popover';\nimport { EyeDropperIcon } from './EyeDropperIcon';\nimport classes from './ColorInput.module.css';\n\nexport type ColorInputStylesNames =\n \| 'dropdown'\n \| 'eyeDropperButton'\n \| 'eyeDropperIcon'\n \| 'colorPreview'\n \| ColorPickerStylesNames\n \| __InputStylesNames;\n\nexport type ColorInputCssVariables = {\n eyeDropperIcon: '--ci-eye-dropper-icon-size';\n eyeDropperButton: '--ci-button-size';\n colorPreview: '--ci-preview-size';\n};\n\nexport interface ColorInputProps\n extends\n BoxProps,\n __BaseInputProps,\n __ColorPickerProps,\n StylesApiProps<ColorInputFactory>,\n ElementProps<'input', 'size' \| 'onChange' \| 'value' \| 'defaultValue'> {\n /** If input is not allowed, the user can only pick value with color picker and swatches /\n disallowInput?: boolean;\n\n /* If set, the input value resets to the last known valid value when the input loses focus @default true /\n fixOnBlur?: boolean;\n\n /* Props passed down to the `Popover` component /\n popoverProps?: PopoverProps;\n\n /* If set, the preview color swatch is displayed in the left section of the input @default true /\n withPreview?: boolean;\n\n /* If set, the eye dropper button is displayed in the right section @default true /\n withEyeDropper?: boolean;\n\n /* An icon to replace the default eye dropper icon /\n eyeDropperIcon?: React.ReactNode;\n\n /* If set, the dropdown is closed when one of the color swatches is clicked @default false /\n closeOnColorSwatchClick?: boolean;\n\n /* Props passed down to the eye dropper button */\n eyeDropperButtonProps?: Record<string, any>;\n}\n\nexport type ColorInputFactory = Factory<{\n props: ColorInputProps;\n ref: HTMLInputElement;\n stylesNames: ColorInputStylesNames;\n vars: ColorInputCssVariables;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n format: 'hex',\n fixOnBlur: true,\n withPreview: true,\n swatchesPerRow: 7,\n withPicker: true,\n popoverProps: { transitionProps: { transition: 'fade', duration: 0 } },\n withEyeDropper: true,\n size: 'sm',\n leftSectionPointerEvents: 'none',\n} satisfies Partial<ColorInputProps>;\n\nconst varsResolver = createVarsResolver<ColorInputFactory>((_, { size }) => ({\n eyeDropperIcon: {\n '--ci-eye-dropper-icon-size': getSize(size, 'ci-eye-dropper-icon-size'),\n },\n\n eyeDropperButton: {\n '--ci-button-size': getSize(size, 'ci-button-size'),\n },\n\n colorPreview: {\n '--ci-preview-size': getSize(size, 'ci-preview-size'),\n },\n}));\n\nexport const ColorInput = factory<ColorInputFactory>((_props) => {\n const props = useProps('ColorInput', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n disallowInput,\n fixOnBlur,\n popoverProps,\n withPreview,\n withEyeDropper,\n eyeDropperIcon,\n closeOnColorSwatchClick,\n eyeDropperButtonProps,\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n onClick,\n onFocus,\n onBlur,\n inputProps,\n format = 'hex',\n wrapperProps,\n readOnly,\n withPicker,\n swatches,\n disabled,\n leftSection,\n rightSection,\n swatchesPerRow,\n ...others\n } = useInputProps('ColorInput', defaultProps, _props);\n\n const getStyles = useStyles<ColorInputFactory>({\n name: 'ColorInput',\n props,\n classes,\n classNames,\n styles,\n unstyled,\n rootSelector: 'wrapper',\n vars: props.vars,\n varsResolver,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ColorInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [dropdownOpened, setDropdownOpened] = useState(false);\n const [lastValidValue, setLastValidValue] = useState('');\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const { supported: eyeDropperSupported, open: openEyeDropper } = useEyeDropper();\n\n const eyeDropper = (\n <ActionIcon\n {...eyeDropperButtonProps}\n {...getStyles('eyeDropperButton', {\n className: eyeDropperButtonProps?.className,\n style: eyeDropperButtonProps?.style,\n })}\n variant=\"subtle\"\n color=\"gray\"\n unstyled={unstyled}\n onClick={() =>\n openEyeDropper()\n .then((payload) => {\n if (payload?.sRGBHex) {\n const color = convertHsvaTo(format, parseColor(payload.sRGBHex));\n setValue(color);\n onChangeEnd?.(color);\n }\n })\n .catch(() => {})\n }\n >\n {eyeDropperIcon \|\| <EyeDropperIcon {...getStyles('eyeDropperIcon')} />}\n </ActionIcon>\n );\n\n const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setDropdownOpened(true);\n };\n\n const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n fixOnBlur && setValue(lastValidValue);\n onBlur?.(event);\n setDropdownOpened(false);\n };\n\n const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n onClick?.(event);\n setDropdownOpened(true);\n };\n\n useEffect(() => {\n if (isColorValid(_value) \|\| _value.trim() === '') {\n setLastValidValue(_value);\n }\n }, [_value]);\n\n useDidUpdate(() => {\n if (isColorValid(_value)) {\n setValue(convertHsvaTo(format, parseColor(_value)));\n }\n }, [format]);\n\n return (\n <Input.Wrapper\n {...wrapperProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n __staticSelector=\"ColorInput\"\n >\n <Popover\n __staticSelector=\"ColorInput\"\n position=\"bottom-start\"\n offset={5}\n opened={dropdownOpened}\n {...popoverProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n withRoles={false}\n disabled={\n readOnly \|\| (withPicker === false && (!Array.isArray(swatches) \|\| swatches.length === 0))\n }\n >\n <Popover.Target>\n <Input<'input'>\n autoComplete=\"off\"\n {...others}\n {...inputProps}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n disabled={disabled}\n __staticSelector=\"ColorInput\"\n onFocus={handleInputFocus}\n onBlur={handleInputBlur}\n onClick={handleInputClick}\n spellCheck={false}\n value={_value}\n onChange={(event) => {\n const inputValue = event.currentTarget.value;\n setValue(inputValue);\n if (isColorValid(inputValue)) {\n onChangeEnd?.(convertHsvaTo(format, parseColor(inputValue)));\n }\n }}\n leftSection={\n leftSection \|\|\n (withPreview ? (\n <ColorSwatch\n color={isColorValid(_value) ? _value : '#fff'}\n size=\"var(--ci-preview-size)\"\n {...getStyles('colorPreview')}\n />\n ) : null)\n }\n readOnly={disallowInput \|\| readOnly}\n pointer={disallowInput}\n unstyled={unstyled}\n rightSection={\n rightSection \|\|\n (withEyeDropper && !disabled && !readOnly && eyeDropperSupported ? eyeDropper : null)\n }\n />\n </Popover.Target>\n\n <Popover.Dropdown\n onMouseDown={(event) => event.preventDefault()}\n className={classes.dropdown}\n >\n <ColorPicker\n __staticSelector=\"ColorInput\"\n value={_value}\n onChange={setValue}\n onChangeEnd={onChangeEnd}\n format={format}\n swatches={swatches}\n swatchesPerRow={swatchesPerRow}\n withPicker={withPicker}\n size={inputProps.size}\n focusable={false}\n unstyled={unstyled}\n styles={resolvedStyles}\n classNames={resolvedClassNames}\n onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}\n attributes={wrapperProps.attributes}\n />\n </Popover.Dropdown>\n </Popover>\n </Input.Wrapper>\n );\n});\n\nColorInput.classes = InputBase.classes;\nColorInput.varsResolver = varsResolver;\nColorInput.displayName = '@mantine/core/ColorInput';\n\nexport namespace ColorInput {\n export type Props = ColorInputProps;\n export type StylesNames = ColorInputStylesNames;\n export type CssVariables = ColorInputCssVariables;\n export type Factory = ColorInputFactory;\n}\n"],"mappings":"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"}

package/esm/components/ColorPicker/AlphaSlider/AlphaSlider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AlphaSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n props: AlphaSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'AlphaSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={(val) => onChange?.(round(val, 2))}\n onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n maxValue={1}\n round={false}\n data-alpha\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n backgroundSize: `${rem(8)} ${rem(8)}`,\n backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n },\n {\n backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAc,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,eACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAW,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAc,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE;IACnC,oBAAoB,UAAU,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAU,YAAY"}
1	+ {"version":3,"file":"AlphaSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\nimport { round } from '../converters/parsers';\n\nexport interface AlphaSliderProps extends ColorSliderOptions {\n color: string;\n}\n\nexport type AlphaSliderFactory = Factory<{\n props: AlphaSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'AlphaSlider',\n} satisfies Partial<AlphaSliderProps>;\n\nexport const AlphaSlider = factory<AlphaSliderFactory>((props: AlphaSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'AlphaSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={(val) => onChange?.(round(val, 2))}\n onChangeEnd={(val) => onChangeEnd?.(round(val, 2))}\n maxValue={1}\n round={false}\n data-alpha\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)',\n backgroundSize: `${rem(8)} ${rem(8)}`,\n backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`,\n },\n {\n backgroundImage: `linear-gradient(90deg, transparent, ${color})`,\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nAlphaSlider.displayName = '@mantine/core/AlphaSlider';\nAlphaSlider.classes = ColorSlider.classes;\n\nexport namespace AlphaSlider {\n export type Props = AlphaSliderProps;\n export type Factory = AlphaSliderFactory;\n}\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,EACnB,kBAAkB,eACnB;AAED,MAAa,cAAc,SAA6B,UAA4B;CAClF,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,eACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACP,WAAW,QAAQ,WAAW,MAAM,KAAK,EAAE,CAAC;EAC5C,cAAc,QAAQ,cAAc,MAAM,KAAK,EAAE,CAAC;EAClD,UAAU;EACV,OAAO;EACP,cAAA;EACA,UAAU;GACR;IACE,iBACE;IACF,gBAAgB,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE;IACnC,oBAAoB,UAAU,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC;IACxE;GACD,EACE,iBAAiB,uCAAuC,MAAM,IAC/D;GACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH;GACF;EACD,CAAA;EAEJ;AAEF,YAAY,cAAc;AAC1B,YAAY,UAAU,YAAY"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.mjs","names":["classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSize,\n getSpacing,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n \| 'wrapper'\n \| 'preview'\n \| 'body'\n \| 'sliders'\n \| 'slider'\n \| 'sliderOverlay'\n \| 'thumb'\n \| 'saturation'\n \| 'thumb'\n \| 'saturationOverlay'\n \| 'thumb'\n \| 'swatches'\n \| 'swatch';\n\nexport type ColorPickerCssVariables = {\n wrapper:\n \| '--cp-preview-size'\n \| '--cp-width'\n \| '--cp-body-spacing'\n \| '--cp-swatch-size'\n \| '--cp-thumb-size'\n \| '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n /** Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when value changes /\n onChange?: (value: string) => void;\n\n /* Called when the user stops dragging one of the sliders or changes the value with keyboard /\n onChangeEnd?: (value: string) => void;\n\n /* Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' /\n format?: ColorFormat;\n\n /* If `false`, the component displays only swatches @default true /\n withPicker?: boolean;\n\n /* A list of colors used to display swatches list below the color picker /\n swatches?: string[];\n\n /* Number of swatches per row @default 7 /\n swatchesPerRow?: number;\n\n /* Component size @default 'md' /\n size?: MantineSize \| (string & {});\n}\n\nexport interface ColorPickerProps\n extends\n BoxProps,\n __ColorPickerProps,\n StylesApiProps<ColorPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n __staticSelector?: string;\n\n /* If set, the component takes 100% width of its container @default false /\n fullWidth?: boolean;\n\n /* If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true /\n focusable?: boolean;\n\n /* Saturation slider `aria-label` /\n saturationLabel?: string;\n\n /* Hue slider `aria-label` /\n hueLabel?: string;\n\n /* Alpha slider `aria-label` /\n alphaLabel?: string;\n\n /* Called when one of the color swatches is clicked /\n onColorSwatchClick?: (color: string) => void;\n\n /* Hidden input `name` attribute, if not set, the input will not be rendered /\n name?: string;\n\n /* Props spread to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n props: ColorPickerProps;\n ref: HTMLDivElement;\n stylesNames: ColorPickerStylesNames;\n vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n swatchesPerRow: 7,\n withPicker: true,\n focusable: true,\n size: 'md',\n __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n wrapper: {\n '--cp-preview-size': getSize(size, 'cp-preview-size'),\n '--cp-width': getSize(size, 'cp-width'),\n '--cp-body-spacing': getSpacing(size),\n '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n const props = useProps('ColorPicker', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n format = 'hex',\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n withPicker,\n size,\n saturationLabel,\n hueLabel,\n alphaLabel,\n focusable,\n swatches,\n swatchesPerRow,\n fullWidth,\n onColorSwatchClick,\n __staticSelector,\n mod,\n attributes,\n name,\n hiddenInputProps,\n ...others\n } = props;\n\n const getStyles = useStyles<ColorPickerFactory>({\n name: __staticSelector,\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'wrapper',\n vars,\n varsResolver,\n });\n\n const formatRef = useRef(format \|\| 'hex');\n const valueRef = useRef<string>('');\n const scrubTimeoutRef = useRef<number>(-1);\n const isScrubbingRef = useRef(false);\n const withAlpha = format === 'hexa' \|\| format === 'rgba' \|\| format === 'hsla';\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n onChange,\n });\n\n const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n const startScrubbing = () => {\n window.clearTimeout(scrubTimeoutRef.current);\n isScrubbingRef.current = true;\n };\n\n const stopScrubbing = () => {\n window.clearTimeout(scrubTimeoutRef.current);\n scrubTimeoutRef.current = window.setTimeout(() => {\n isScrubbingRef.current = false;\n }, 200);\n };\n\n const handleChange = (color: Partial<HsvaColor>) => {\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n setValue(valueRef.current);\n };\n\n useDidUpdate(() => {\n if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n setParsed(parseColor(value));\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format \|\| 'hex';\n setValue(convertHsvaTo(formatRef.current, parsed));\n }, [format]);\n\n return (\n <ColorPickerContext value={{ getStyles, unstyled }}>\n <Box\n {...getStyles('wrapper')}\n size={size}\n mod={[{ 'full-width': fullWidth }, mod]}\n {...others}\n >\n {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n onChangeEnd={({ s, v }) =>\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n }\n color={_value}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n\n <div {...getStyles('body')}>\n <div {...getStyles('sliders')}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n onChangeEnd={(h) =>\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n }\n size={size}\n focusable={focusable}\n aria-label={hueLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n onChangeEnd={(a) => {\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n }}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n focusable={focusable}\n aria-label={alphaLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size=\"var(--cp-preview-size)\"\n {...getStyles('preview')}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n setValue={setValue}\n value={_value}\n onChangeEnd={(color) => {\n const convertedColor = convertHsvaTo(format, parseColor(color));\n onColorSwatchClick?.(convertedColor);\n onChangeEnd?.(convertedColor);\n if (!controlled) {\n setParsed(parseColor(color));\n }\n }}\n />\n )}\n </Box>\n </ColorPickerContext>\n );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ColorPicker.mjs","names":["classes"],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDidUpdate, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n ElementProps,\n factory,\n Factory,\n getSize,\n getSpacing,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { ColorSwatch } from '../ColorSwatch';\nimport { AlphaSlider } from './AlphaSlider/AlphaSlider';\nimport { ColorPickerContext } from './ColorPicker.context';\nimport { ColorFormat, HsvaColor } from './ColorPicker.types';\nimport { convertHsvaTo, isColorValid, parseColor } from './converters';\nimport { HueSlider } from './HueSlider/HueSlider';\nimport { Saturation } from './Saturation/Saturation';\nimport { Swatches } from './Swatches/Swatches';\nimport classes from './ColorPicker.module.css';\n\nexport type ColorPickerStylesNames =\n \| 'wrapper'\n \| 'preview'\n \| 'body'\n \| 'sliders'\n \| 'slider'\n \| 'sliderOverlay'\n \| 'thumb'\n \| 'saturation'\n \| 'thumb'\n \| 'saturationOverlay'\n \| 'thumb'\n \| 'swatches'\n \| 'swatch';\n\nexport type ColorPickerCssVariables = {\n wrapper:\n \| '--cp-preview-size'\n \| '--cp-width'\n \| '--cp-body-spacing'\n \| '--cp-swatch-size'\n \| '--cp-thumb-size'\n \| '--cp-saturation-height';\n};\n\nexport interface __ColorPickerProps {\n /** Controlled component value /\n value?: string;\n\n /* Uncontrolled component default value /\n defaultValue?: string;\n\n /* Called when value changes /\n onChange?: (value: string) => void;\n\n /* Called when the user stops dragging one of the sliders or changes the value with keyboard /\n onChangeEnd?: (value: string) => void;\n\n /* Color format. `hexa`, `rgba`, `hsla` values render alpha channel slider @default 'hex' /\n format?: ColorFormat;\n\n /* If `false`, the component displays only swatches @default true /\n withPicker?: boolean;\n\n /* A list of colors used to display swatches list below the color picker /\n swatches?: string[];\n\n /* Number of swatches per row @default 7 /\n swatchesPerRow?: number;\n\n /* Component size @default 'md' /\n size?: MantineSize \| (string & {});\n}\n\nexport interface ColorPickerProps\n extends\n BoxProps,\n __ColorPickerProps,\n StylesApiProps<ColorPickerFactory>,\n ElementProps<'div', 'onChange' \| 'value' \| 'defaultValue'> {\n __staticSelector?: string;\n\n /* If set, the component takes 100% width of its container @default false /\n fullWidth?: boolean;\n\n /* If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true /\n focusable?: boolean;\n\n /* Saturation slider `aria-label` /\n saturationLabel?: string;\n\n /* Hue slider `aria-label` /\n hueLabel?: string;\n\n /* Alpha slider `aria-label` /\n alphaLabel?: string;\n\n /* Called when one of the color swatches is clicked /\n onColorSwatchClick?: (color: string) => void;\n\n /* Hidden input `name` attribute, if not set, the input will not be rendered /\n name?: string;\n\n /* Props spread to the hidden input */\n hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n}\n\nexport type ColorPickerFactory = Factory<{\n props: ColorPickerProps;\n ref: HTMLDivElement;\n stylesNames: ColorPickerStylesNames;\n vars: ColorPickerCssVariables;\n}>;\n\nconst defaultProps = {\n swatchesPerRow: 7,\n withPicker: true,\n focusable: true,\n size: 'md',\n __staticSelector: 'ColorPicker',\n} satisfies Partial<ColorPickerProps>;\n\nconst varsResolver = createVarsResolver<ColorPickerFactory>((_, { size, swatchesPerRow }) => ({\n wrapper: {\n '--cp-preview-size': getSize(size, 'cp-preview-size'),\n '--cp-width': getSize(size, 'cp-width'),\n '--cp-body-spacing': getSpacing(size),\n '--cp-swatch-size': `${100 / swatchesPerRow!}%`,\n '--cp-thumb-size': getSize(size, 'cp-thumb-size'),\n '--cp-saturation-height': getSize(size, 'cp-saturation-height'),\n },\n}));\n\nexport const ColorPicker = factory<ColorPickerFactory>((_props) => {\n const props = useProps('ColorPicker', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n format = 'hex',\n value,\n defaultValue,\n onChange,\n onChangeEnd,\n withPicker,\n size,\n saturationLabel,\n hueLabel,\n alphaLabel,\n focusable,\n swatches,\n swatchesPerRow,\n fullWidth,\n onColorSwatchClick,\n __staticSelector,\n mod,\n attributes,\n name,\n hiddenInputProps,\n ...others\n } = props;\n\n const getStyles = useStyles<ColorPickerFactory>({\n name: __staticSelector,\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'wrapper',\n vars,\n varsResolver,\n });\n\n const formatRef = useRef(format \|\| 'hex');\n const valueRef = useRef<string>('');\n const scrubTimeoutRef = useRef<number>(-1);\n const isScrubbingRef = useRef(false);\n const withAlpha = format === 'hexa' \|\| format === 'rgba' \|\| format === 'hsla';\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '#FFFFFF',\n onChange,\n });\n\n const [parsed, setParsed] = useState<HsvaColor>(parseColor(_value));\n\n const startScrubbing = () => {\n window.clearTimeout(scrubTimeoutRef.current);\n isScrubbingRef.current = true;\n };\n\n const stopScrubbing = () => {\n window.clearTimeout(scrubTimeoutRef.current);\n scrubTimeoutRef.current = window.setTimeout(() => {\n isScrubbingRef.current = false;\n }, 200);\n };\n\n const handleChange = (color: Partial<HsvaColor>) => {\n setParsed((current) => {\n const next = { ...current, ...color };\n valueRef.current = convertHsvaTo(formatRef.current, next);\n return next;\n });\n\n setValue(valueRef.current);\n };\n\n useDidUpdate(() => {\n if (typeof value === 'string' && isColorValid(value) && !isScrubbingRef.current) {\n setParsed(parseColor(value));\n }\n }, [value]);\n\n useDidUpdate(() => {\n formatRef.current = format \|\| 'hex';\n setValue(convertHsvaTo(formatRef.current, parsed));\n }, [format]);\n\n return (\n <ColorPickerContext value={{ getStyles, unstyled }}>\n <Box\n {...getStyles('wrapper')}\n size={size}\n mod={[{ 'full-width': fullWidth }, mod]}\n {...others}\n >\n {name && <input type=\"hidden\" name={name} value={_value} {...hiddenInputProps} />}\n\n {withPicker && (\n <>\n <Saturation\n value={parsed}\n onChange={handleChange}\n onChangeEnd={({ s, v }) =>\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, s: s!, v: v! }))\n }\n color={_value}\n size={size}\n focusable={focusable}\n saturationLabel={saturationLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n\n <div {...getStyles('body')}>\n <div {...getStyles('sliders')}>\n <HueSlider\n value={parsed.h}\n onChange={(h) => handleChange({ h })}\n onChangeEnd={(h) =>\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, h }))\n }\n size={size}\n focusable={focusable}\n aria-label={hueLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n\n {withAlpha && (\n <AlphaSlider\n value={parsed.a}\n onChange={(a) => handleChange({ a })}\n onChangeEnd={(a) => {\n onChangeEnd?.(convertHsvaTo(formatRef.current, { ...parsed, a }));\n }}\n size={size}\n color={convertHsvaTo('hex', parsed)}\n focusable={focusable}\n aria-label={alphaLabel}\n onScrubStart={startScrubbing}\n onScrubEnd={stopScrubbing}\n />\n )}\n </div>\n\n {withAlpha && (\n <ColorSwatch\n color={_value}\n radius=\"sm\"\n size=\"var(--cp-preview-size)\"\n {...getStyles('preview')}\n />\n )}\n </div>\n </>\n )}\n\n {Array.isArray(swatches) && (\n <Swatches\n data={swatches}\n swatchesPerRow={swatchesPerRow}\n focusable={focusable}\n setValue={setValue}\n value={_value}\n onChangeEnd={(color) => {\n const convertedColor = convertHsvaTo(format, parseColor(color));\n onColorSwatchClick?.(convertedColor);\n onChangeEnd?.(convertedColor);\n if (!controlled) {\n setParsed(parseColor(color));\n }\n }}\n />\n )}\n </Box>\n </ColorPickerContext>\n );\n});\n\nColorPicker.classes = classes;\nColorPicker.varsResolver = varsResolver;\nColorPicker.displayName = '@mantine/core/ColorPicker';\n\nexport namespace ColorPicker {\n export type Props = ColorPickerProps;\n export type CssVariables = ColorPickerCssVariables;\n export type Factory = ColorPickerFactory;\n export type StylesNames = ColorPickerStylesNames;\n}\n"],"mappings":"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"}

package/esm/components/ColorPicker/HueSlider/HueSlider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HueSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/HueSlider/HueSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\n\nexport interface HueSliderProps extends ColorSliderOptions {}\n\nexport type HueSliderFactory = Factory<{\n props: HueSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'HueSlider',\n} satisfies Partial<HueSliderProps>;\n\nexport const HueSlider = factory<HueSliderFactory>((props: HueSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'HueSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={onChange}\n onChangeEnd={onChangeEnd}\n maxValue={360}\n thumbColor={`hsl(${value}, 100%, 50%)`}\n round\n data-hue\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))',\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nHueSlider.displayName = '@mantine/core/HueSlider';\nHueSlider.classes = ColorSlider.classes;\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,EACnB,kBAAkB,aACnB;AAED,MAAa,YAAY,SAA2B,UAA0B;CAC5E,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,aACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACG;EACG;EACb,UAAU;EACV,YAAY,OAAO,MAAM;EACzB,OAAA;EACA,YAAA;EACA,UAAU,CACR,EACE,iBACE,wJACH,EACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH,CACF;EACD,CAAA;EAEJ;AAEF,UAAU,cAAc;AACxB,UAAU,UAAU,YAAY"}
1	+ {"version":3,"file":"HueSlider.mjs","names":[],"sources":["../../../../src/components/ColorPicker/HueSlider/HueSlider.tsx"],"sourcesContent":["import { Factory, factory, rem, useProps } from '../../../core';\nimport {\n ColorSlider,\n ColorSliderOptions,\n ColorSliderStylesNames,\n} from '../ColorSlider/ColorSlider';\n\nexport interface HueSliderProps extends ColorSliderOptions {}\n\nexport type HueSliderFactory = Factory<{\n props: HueSliderProps;\n ref: HTMLDivElement;\n stylesNames: ColorSliderStylesNames;\n}>;\n\nconst defaultProps = {\n __staticSelector: 'HueSlider',\n} satisfies Partial<HueSliderProps>;\n\nexport const HueSlider = factory<HueSliderFactory>((props: HueSliderProps) => {\n const { value, onChange, onChangeEnd, color, ...others } = useProps(\n 'HueSlider',\n defaultProps,\n props\n );\n\n return (\n <ColorSlider\n {...others}\n value={value}\n onChange={onChange}\n onChangeEnd={onChangeEnd}\n maxValue={360}\n thumbColor={`hsl(${value}, 100%, 50%)`}\n round\n data-hue\n overlays={[\n {\n backgroundImage:\n 'linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))',\n },\n {\n boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(\n 4\n )} inset`,\n },\n ]}\n />\n );\n});\n\nHueSlider.displayName = '@mantine/core/HueSlider';\nHueSlider.classes = ColorSlider.classes;\n\nexport namespace HueSlider {\n export type Props = HueSliderProps;\n export type Factory = HueSliderFactory;\n}\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,EACnB,kBAAkB,aACnB;AAED,MAAa,YAAY,SAA2B,UAA0B;CAC5E,MAAM,EAAE,OAAO,UAAU,aAAa,OAAO,GAAG,WAAW,SACzD,aACA,cACA,MACD;AAED,QACE,oBAAC,aAAD;EACE,GAAI;EACG;EACG;EACG;EACb,UAAU;EACV,YAAY,OAAO,MAAM;EACzB,OAAA;EACA,YAAA;EACA,UAAU,CACR,EACE,iBACE,wJACH,EACD,EACE,WAAW,2BAA2B,IAAI,EAAE,CAAC,gCAAgC,IAC3E,EACD,CAAC,SACH,CACF;EACD,CAAA;EAEJ;AAEF,UAAU,cAAc;AACxB,UAAU,UAAU,YAAY"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSwatch.mjs","names":["classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getRadius,\n MantineRadius,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n \| 'root'\n \| 'alphaOverlay'\n \| 'shadowOverlay'\n \| 'colorOverlay'\n \| 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n root: '--cs-radius' \| '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n /** Valid CSS color to display /\n color: string;\n\n /* Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 /\n size?: React.CSSProperties['width'];\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 /\n radius?: MantineRadius;\n\n /* If set, the swatch has inner `box-shadow` @default true /\n withShadow?: boolean;\n\n /* Children inside the swatch */\n children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n props: ColorSwatchProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: ColorSwatchStylesNames;\n vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n root: {\n '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n '--cs-size': rem(size),\n },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n const props = useProps('ColorSwatch', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n radius,\n withShadow,\n children,\n attributes,\n ...others\n } = useProps('ColorSwatch', defaultProps, props);\n\n const getStyles = useStyles<ColorSwatchFactory>({\n name: 'ColorSwatch',\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 <Box {...getStyles('root', { focusable: true })} {...others}>\n <span {...getStyles('alphaOverlay')} />\n {withShadow && <span {...getStyles('shadowOverlay')} />}\n <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n <span {...getStyles('childrenOverlay')}>{children}</span>\n </Box>\n );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,MACb;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACnE,aAAa,IAAI,KAAK;CACvB,EACF,EAAE;AAEH,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,MAAM,CAAC;EAAE,GAAI;YAArD;GACE,oBAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtC,cAAc,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAI,CAAA;GACvD,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,OAAO,EAAE,CAAC,EAAI,CAAA;GAC9E,oBAAC,QAAD;IAAM,GAAI,UAAU,kBAAkB;IAAG;IAAgB,CAAA;GACrD;;EAER;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}
1	+ {"version":3,"file":"ColorSwatch.mjs","names":["classes"],"sources":["../../../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getRadius,\n MantineRadius,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './ColorSwatch.module.css';\n\nexport type ColorSwatchStylesNames =\n \| 'root'\n \| 'alphaOverlay'\n \| 'shadowOverlay'\n \| 'colorOverlay'\n \| 'childrenOverlay';\n\nexport type ColorSwatchCssVariables = {\n root: '--cs-radius' \| '--cs-size';\n};\n\nexport interface ColorSwatchProps extends BoxProps, StylesApiProps<ColorSwatchFactory> {\n /** Valid CSS color to display /\n color: string;\n\n /* Swatch `width` and `height`, any valid CSS value, numbers are converted to rem. @default 28 /\n size?: React.CSSProperties['width'];\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem. @default 1000 /\n radius?: MantineRadius;\n\n /* If set, the swatch has inner `box-shadow` @default true /\n withShadow?: boolean;\n\n /* Children inside the swatch */\n children?: React.ReactNode;\n}\n\nexport type ColorSwatchFactory = PolymorphicFactory<{\n props: ColorSwatchProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: ColorSwatchStylesNames;\n vars: ColorSwatchCssVariables;\n}>;\n\nconst defaultProps = {\n withShadow: true,\n} satisfies Partial<ColorSwatchProps>;\n\nconst varsResolver = createVarsResolver<ColorSwatchFactory>((_, { radius, size }) => ({\n root: {\n '--cs-radius': radius === undefined ? undefined : getRadius(radius),\n '--cs-size': rem(size),\n },\n}));\n\nexport const ColorSwatch = polymorphicFactory<ColorSwatchFactory>((_props) => {\n const props = useProps('ColorSwatch', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n radius,\n withShadow,\n children,\n attributes,\n ...others\n } = useProps('ColorSwatch', defaultProps, props);\n\n const getStyles = useStyles<ColorSwatchFactory>({\n name: 'ColorSwatch',\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 <Box {...getStyles('root', { focusable: true })} {...others}>\n <span {...getStyles('alphaOverlay')} />\n {withShadow && <span {...getStyles('shadowOverlay')} />}\n <span {...getStyles('colorOverlay', { style: { backgroundColor: color } })} />\n <span {...getStyles('childrenOverlay')}>{children}</span>\n </Box>\n );\n});\n\nColorSwatch.classes = classes;\nColorSwatch.varsResolver = varsResolver;\nColorSwatch.displayName = '@mantine/core/ColorSwatch';\n\nexport namespace ColorSwatch {\n export type Props = ColorSwatchProps;\n export type CssVariables = ColorSwatchCssVariables;\n export type Factory = ColorSwatchFactory;\n export type StylesNames = ColorSwatchStylesNames;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe,EACnB,YAAY,MACb;AAED,MAAM,eAAe,oBAAwC,GAAG,EAAE,QAAQ,YAAY,EACpF,MAAM;CACJ,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO;CACnE,aAAa,IAAI,KAAK;CACvB,EACF,EAAE;AAEH,MAAa,cAAc,oBAAwC,WAAW;CAC5E,MAAM,QAAQ,SAAS,eAAe,cAAc,OAAO;CAC3D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,QACA,YACA,UACA,YACA,GAAG,WACD,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,YAAY,UAA8B;EAC9C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,MAAM,CAAC;EAAE,GAAI;YAArD;GACE,oBAAC,QAAD,EAAM,GAAI,UAAU,eAAe,EAAI,CAAA;GACtC,cAAc,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAI,CAAA;GACvD,oBAAC,QAAD,EAAM,GAAI,UAAU,gBAAgB,EAAE,OAAO,EAAE,iBAAiB,OAAO,EAAE,CAAC,EAAI,CAAA;GAC9E,oBAAC,QAAD;IAAM,GAAI,UAAU,kBAAkB;IAAG;IAAgB,CAAA;GACrD;;EAER;AAEF,YAAY,UAAUA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}

package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs CHANGED Viewed

@@ -34,6 +34,7 @@ const ComboboxTarget = factory((props) => {
 		...others
 	});
 	return /* @__PURE__ */ jsx(Popover.Target, {
+		refProp,
 		ref: useMergedRef(ref, ctx.store.targetRef),
 		children: clonedElement
 	});

package/esm/components/Combobox/ComboboxTarget/ComboboxTarget.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n /** Target element /\n children: React.ReactNode;\n\n /* Key of the prop that is used to access element ref /\n refProp?: string;\n\n /* If set, the component responds to keyboard events @default true /\n withKeyboardNavigation?: boolean;\n\n /* If set, the target has `aria-` attributes @default true /\n withAriaAttributes?: boolean;\n\n /* If set, the target has `aria-expanded` attribute @default false /\n withExpandedAttribute?: boolean;\n\n /* Determines which events is handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * /\n targetType?: 'button' \| 'input';\n\n /* Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n props: ComboboxTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useComboboxContext();\n\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n autoComplete,\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n });\n\n return (\n <Popover.Target ref={useMergedRef(ref, ctx.store.targetRef)}>{clonedElement}</Popover.Target>\n );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAM,oBAAoB;CAWhC,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAVkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC,QAAQ,QAAT;~~EAAgB~~,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;~~YAAG~~;~~EAA+B~~,CAAA;~~EAE/F~~;AAEF,eAAe,cAAc"}
1	+ {"version":3,"file":"ComboboxTarget.mjs","names":[],"sources":["../../../../src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { factory, Factory, getSingleElementChild, useProps } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport { useComboboxTargetProps } from '../use-combobox-target-props/use-combobox-target-props';\n\nexport interface ComboboxTargetProps {\n /** Target element /\n children: React.ReactNode;\n\n /* Key of the prop that is used to access element ref /\n refProp?: string;\n\n /* If set, the component responds to keyboard events @default true /\n withKeyboardNavigation?: boolean;\n\n /* If set, the target has `aria-` attributes @default true /\n withAriaAttributes?: boolean;\n\n /* If set, the target has `aria-expanded` attribute @default false /\n withExpandedAttribute?: boolean;\n\n /* Determines which events is handled by the target element.\n * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.\n * @default input\n * /\n targetType?: 'button' \| 'input';\n\n /* Input autocomplete attribute */\n autoComplete?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n targetType: 'input',\n withKeyboardNavigation: true,\n withAriaAttributes: true,\n withExpandedAttribute: false,\n autoComplete: 'off',\n} satisfies Partial<ComboboxTargetProps>;\n\nexport type ComboboxTargetFactory = Factory<{\n props: ComboboxTargetProps;\n ref: HTMLElement;\n compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n const {\n children,\n refProp,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n ref,\n ...others\n } = useProps('ComboboxTarget', defaultProps, props);\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n 'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useComboboxContext();\n\n const targetProps = useComboboxTargetProps({\n targetType,\n withAriaAttributes,\n withKeyboardNavigation,\n withExpandedAttribute,\n onKeyDown: (child.props as any).onKeyDown,\n autoComplete,\n });\n\n const clonedElement = cloneElement(child, {\n ...targetProps,\n ...others,\n });\n\n return (\n <Popover.Target refProp={refProp} ref={useMergedRef(ref, ctx.store.targetRef)}>\n {clonedElement}\n </Popover.Target>\n );\n});\n\nComboboxTarget.displayName = '@mantine/core/ComboboxTarget';\n"],"mappings":";;;;;;;;;;;AAiCA,MAAM,eAAe;CACnB,SAAS;CACT,YAAY;CACZ,wBAAwB;CACxB,oBAAoB;CACpB,uBAAuB;CACvB,cAAc;CACf;AAQD,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EACJ,UACA,SACA,wBACA,oBACA,uBACA,YACA,cACA,KACA,GAAG,WACD,SAAS,kBAAkB,cAAc,MAAM;CAEnD,MAAM,QAAQ,sBAAsB,SAAS;AAC7C,KAAI,CAAC,MACH,OAAM,IAAI,MACR,oKACD;CAGH,MAAM,MAAM,oBAAoB;CAWhC,MAAM,gBAAgB,aAAa,OAAO;EACxC,GAVkB,uBAAuB;GACzC;GACA;GACA;GACA;GACA,WAAY,MAAM,MAAc;GAChC;GACD,CAAC;EAIA,GAAG;EACJ,CAAC;AAEF,QACE,oBAAC,QAAQ,QAAT;EAAyB;EAAS,KAAK,aAAa,KAAK,IAAI,MAAM,UAAU;YAC1E;EACc,CAAA;EAEnB;AAEF,eAAe,cAAc"}

package/esm/components/Combobox/use-combobox-target-props/use-combobox-target-props.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-combobox-target-props.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' \| 'button' \| undefined;\n withAriaAttributes: boolean \| undefined;\n withKeyboardNavigation: boolean \| undefined;\n withExpandedAttribute: boolean \| undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> \| undefined;\n autoComplete: string \| undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string \| null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' \|\| event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // ~~eslint~~-disable-next-line @typescript~~-eslint~~/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId \|\| undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened \|\| undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened \|\| undefined,\n }\n : {};\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n };\n}\n"],"mappings":";;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAwB5C,QAAO;EACL,GAnBqB,qBACnB;GACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;GAC9D,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}
1	+ {"version":3,"file":"use-combobox-target-props.mjs","names":[],"sources":["../../../../src/components/Combobox/use-combobox-target-props/use-combobox-target-props.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useComboboxContext } from '../Combobox.context';\n\ninterface UseComboboxTargetPropsInput {\n targetType: 'input' \| 'button' \| undefined;\n withAriaAttributes: boolean \| undefined;\n withKeyboardNavigation: boolean \| undefined;\n withExpandedAttribute: boolean \| undefined;\n onKeyDown: React.KeyboardEventHandler<HTMLInputElement> \| undefined;\n autoComplete: string \| undefined;\n}\n\nexport function useComboboxTargetProps({\n onKeyDown,\n withKeyboardNavigation,\n withAriaAttributes,\n withExpandedAttribute,\n targetType,\n autoComplete,\n}: UseComboboxTargetPropsInput) {\n const ctx = useComboboxContext();\n const [selectedOptionId, setSelectedOptionId] = useState<string \| null>(null);\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (ctx.readOnly) {\n return;\n }\n\n if (withKeyboardNavigation) {\n // Ignore during composition in IME\n if (event.nativeEvent.isComposing) {\n return;\n }\n\n if (event.nativeEvent.code === 'ArrowDown') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectNextOption());\n }\n }\n\n if (event.nativeEvent.code === 'ArrowUp') {\n event.preventDefault();\n\n if (!ctx.store.dropdownOpened) {\n ctx.store.openDropdown('keyboard');\n setSelectedOptionId(ctx.store.selectActiveOption());\n ctx.store.updateSelectedOptionIndex('selected', { scrollIntoView: true });\n } else {\n setSelectedOptionId(ctx.store.selectPreviousOption());\n }\n }\n\n if (event.nativeEvent.code === 'Enter' \|\| event.nativeEvent.code === 'NumpadEnter') {\n // This is a workaround for handling differences in behavior of isComposing property in Safari\n // See: https://dninomiya.github.io/form-guide/stop-enter-submit\n // oxlint-disable-next-line typescript/no-deprecated\n if (event.nativeEvent.keyCode === 229) {\n return;\n }\n\n const selectedOptionIndex = ctx.store.getSelectedOptionIndex();\n\n if (ctx.store.dropdownOpened && selectedOptionIndex !== -1) {\n event.preventDefault();\n ctx.store.clickSelectedOption();\n } else if (targetType === 'button') {\n event.preventDefault();\n ctx.store.openDropdown('keyboard');\n }\n }\n\n if (event.key === 'Escape') {\n ctx.store.closeDropdown('keyboard');\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (targetType === 'button') {\n event.preventDefault();\n ctx.store.toggleDropdown('keyboard');\n }\n }\n }\n };\n\n const ariaAttributes = withAriaAttributes\n ? {\n ...(withExpandedAttribute ? { role: 'combobox' as const } : {}),\n 'aria-haspopup': 'listbox' as const,\n 'aria-expanded': withExpandedAttribute\n ? !!(ctx.store.listId && ctx.store.dropdownOpened)\n : undefined,\n 'aria-controls':\n ctx.store.dropdownOpened && ctx.store.listId ? ctx.store.listId : undefined,\n 'aria-activedescendant': ctx.store.dropdownOpened\n ? selectedOptionId \|\| undefined\n : undefined,\n autoComplete,\n 'data-expanded': ctx.store.dropdownOpened \|\| undefined,\n 'data-mantine-stop-propagation': ctx.store.dropdownOpened \|\| undefined,\n }\n : {};\n\n return {\n ...ariaAttributes,\n onKeyDown: handleKeyDown,\n };\n}\n"],"mappings":";;;;AAYA,SAAgB,uBAAuB,EACrC,WACA,wBACA,oBACA,uBACA,YACA,gBAC8B;CAC9B,MAAM,MAAM,oBAAoB;CAChC,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAE7E,MAAM,iBAAiB,UAAiD;AACtE,cAAY,MAAM;AAElB,MAAI,IAAI,SACN;AAGF,MAAI,wBAAwB;AAE1B,OAAI,MAAM,YAAY,YACpB;AAGF,OAAI,MAAM,YAAY,SAAS,aAAa;AAC1C,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,kBAAkB,CAAC;;AAIrD,OAAI,MAAM,YAAY,SAAS,WAAW;AACxC,UAAM,gBAAgB;AAEtB,QAAI,CAAC,IAAI,MAAM,gBAAgB;AAC7B,SAAI,MAAM,aAAa,WAAW;AAClC,yBAAoB,IAAI,MAAM,oBAAoB,CAAC;AACnD,SAAI,MAAM,0BAA0B,YAAY,EAAE,gBAAgB,MAAM,CAAC;UAEzE,qBAAoB,IAAI,MAAM,sBAAsB,CAAC;;AAIzD,OAAI,MAAM,YAAY,SAAS,WAAW,MAAM,YAAY,SAAS,eAAe;AAIlF,QAAI,MAAM,YAAY,YAAY,IAChC;IAGF,MAAM,sBAAsB,IAAI,MAAM,wBAAwB;AAE9D,QAAI,IAAI,MAAM,kBAAkB,wBAAwB,IAAI;AAC1D,WAAM,gBAAgB;AACtB,SAAI,MAAM,qBAAqB;eACtB,eAAe,UAAU;AAClC,WAAM,gBAAgB;AACtB,SAAI,MAAM,aAAa,WAAW;;;AAItC,OAAI,MAAM,QAAQ,SAChB,KAAI,MAAM,cAAc,WAAW;AAGrC,OAAI,MAAM,YAAY,SAAS;QACzB,eAAe,UAAU;AAC3B,WAAM,gBAAgB;AACtB,SAAI,MAAM,eAAe,WAAW;;;;;AAwB5C,QAAO;EACL,GAnBqB,qBACnB;GACE,GAAI,wBAAwB,EAAE,MAAM,YAAqB,GAAG,EAAE;GAC9D,iBAAiB;GACjB,iBAAiB,wBACb,CAAC,EAAE,IAAI,MAAM,UAAU,IAAI,MAAM,kBACjC,KAAA;GACJ,iBACE,IAAI,MAAM,kBAAkB,IAAI,MAAM,SAAS,IAAI,MAAM,SAAS,KAAA;GACpE,yBAAyB,IAAI,MAAM,iBAC/B,oBAAoB,KAAA,IACpB,KAAA;GACJ;GACA,iBAAiB,IAAI,MAAM,kBAAkB,KAAA;GAC7C,iCAAiC,IAAI,MAAM,kBAAkB,KAAA;GAC9D,GACD,EAAE;EAIJ,WAAW;EACZ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Container.mjs","names":["classes"],"sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Container.module.css';\n\nexport type ContainerStylesNames = 'root';\nexport type ContainerCssVariables = {\n root: '--container-size';\n};\n\nexport interface ContainerProps\n extends BoxProps, StylesApiProps<ContainerFactory>, ElementProps<'div'> {\n /** `max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* If set, the container takes 100% width of its parent and `size` prop is ignored. @default false /\n fluid?: boolean;\n\n /* Centering strategy @default 'block' */\n strategy?: 'block' \| 'grid';\n}\n\nexport type ContainerFactory = Factory<{\n props: ContainerProps;\n ref: HTMLDivElement;\n stylesNames: ContainerStylesNames;\n vars: ContainerCssVariables;\n}>;\n\nconst defaultProps = {\n strategy: 'block',\n} satisfies Partial<ContainerProps>;\n\nconst varsResolver = createVarsResolver<ContainerFactory>((_, { size, fluid }) => ({\n root: {\n '--container-size': fluid ? undefined : getSize(size, 'container-size'),\n },\n}));\n\nexport const Container = factory<ContainerFactory>((_props) => {\n const props = useProps('Container', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n fluid,\n mod,\n attributes,\n strategy,\n ...others\n } = props;\n\n const getStyles = useStyles<ContainerFactory>({\n name: 'Container',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box mod={[{ fluid, strategy }, mod]} {...getStyles('root')} {...others} />;\n});\n\nContainer.classes = classes;\nContainer.varsResolver = varsResolver;\nContainer.displayName = '@mantine/core/Container';\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,eAAe,EACnB,UAAU,SACX;AAED,MAAM,eAAe,oBAAsC,GAAG,EAAE,MAAM,aAAa,EACjF,MAAM,EACJ,oBAAoB,QAAQ,KAAA,IAAY,QAAQ,MAAM,iBAAiB,EACxE,EACF,EAAE;AAEH,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,KACA,YACA,UACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,KAAD;EAAK,KAAK,CAAC;GAAE;GAAO;GAAU,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAClF;AAEF,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
1	+ {"version":3,"file":"Container.mjs","names":["classes"],"sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Container.module.css';\n\nexport type ContainerStylesNames = 'root';\nexport type ContainerCssVariables = {\n root: '--container-size';\n};\n\nexport interface ContainerProps\n extends BoxProps, StylesApiProps<ContainerFactory>, ElementProps<'div'> {\n /** `max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* If set, the container takes 100% width of its parent and `size` prop is ignored. @default false /\n fluid?: boolean;\n\n /* Centering strategy @default 'block' */\n strategy?: 'block' \| 'grid';\n}\n\nexport type ContainerFactory = Factory<{\n props: ContainerProps;\n ref: HTMLDivElement;\n stylesNames: ContainerStylesNames;\n vars: ContainerCssVariables;\n}>;\n\nconst defaultProps = {\n strategy: 'block',\n} satisfies Partial<ContainerProps>;\n\nconst varsResolver = createVarsResolver<ContainerFactory>((_, { size, fluid }) => ({\n root: {\n '--container-size': fluid ? undefined : getSize(size, 'container-size'),\n },\n}));\n\nexport const Container = factory<ContainerFactory>((_props) => {\n const props = useProps('Container', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n fluid,\n mod,\n attributes,\n strategy,\n ...others\n } = props;\n\n const getStyles = useStyles<ContainerFactory>({\n name: 'Container',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box mod={[{ fluid, strategy }, mod]} {...getStyles('root')} {...others} />;\n});\n\nContainer.classes = classes;\nContainer.varsResolver = varsResolver;\nContainer.displayName = '@mantine/core/Container';\n\nexport namespace Container {\n export type Props = ContainerProps;\n export type StylesNames = ContainerStylesNames;\n export type CssVariables = ContainerCssVariables;\n export type Factory = ContainerFactory;\n}\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,eAAe,EACnB,UAAU,SACX;AAED,MAAM,eAAe,oBAAsC,GAAG,EAAE,MAAM,aAAa,EACjF,MAAM,EACJ,oBAAoB,QAAQ,KAAA,IAAY,QAAQ,MAAM,iBAAiB,EACxE,EACF,EAAE;AAEH,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,KACA,YACA,UACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,oBAAC,KAAD;EAAK,KAAK,CAAC;GAAE;GAAO;GAAU,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAClF;AAEF,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' \| 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false /\n keepMounted?: boolean;\n\n /* If set, displays the close button @default true /\n withCloseButton?: boolean;\n\n /* Called on close button click /\n onClose?: () => void;\n\n /* Dialog content /\n children?: React.ReactNode;\n\n /* Opened state /\n opened: boolean;\n\n /* Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } /\n transitionProps?: TransitionOverride;\n\n /* Controls `width` of the dialog @default 'md' */\n size?: MantineSize \| (string & {}) \| number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;EAAK;CAC/D,UAAU;EACR,QAAQ;EACR,OAAO;EACR;CACF;AAED,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,cAAc,EAC9C,EACF,EAAE;AAEH,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;YAEV,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;cACvD,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,kBAAkB,CAAC;IAClD,GAAI;cAHN,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,cAAc;KAAI,CAAA,EAEpF,SACK;;GAEC,CAAA;EACP,CAAA;EAEV;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
1	+ {"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' \| 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false /\n keepMounted?: boolean;\n\n /* If set, displays the close button @default true /\n withCloseButton?: boolean;\n\n /* Called on close button click /\n onClose?: () => void;\n\n /* Dialog content /\n children?: React.ReactNode;\n\n /* Opened state /\n opened: boolean;\n\n /* Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } /\n transitionProps?: TransitionOverride;\n\n /* Controls `width` of the dialog @default 'md' */\n size?: MantineSize \| (string & {}) \| number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;EAAK;CAC/D,UAAU;EACR,QAAQ;EACR,OAAO;EACR;CACF;AAED,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,cAAc,EAC9C,EACF,EAAE;AAEH,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,OAAO;CACtD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;YAEV,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;cACvD,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,kBAAkB,CAAC;IAClD,GAAI;cAHN,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,cAAc;KAAI,CAAA,EAEpF,SACK;;GAEC,CAAA;EACP,CAAA;EAEV;AAEF,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Divider.mjs","names":["classes"],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Divider.module.css';\n\nexport type DividerStylesNames = 'root' \| 'label';\nexport type DividerVariant = 'solid' \| 'dashed' \| 'dotted';\nexport type DividerCssVariables = {\n root: '--divider-color' \| '--divider-border-style' \| '--divider-size';\n};\n\nexport interface DividerProps\n extends BoxProps, StylesApiProps<DividerFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color value /\n color?: MantineColor;\n\n /* Controls width/height (depends on orientation) @default 'xs' /\n size?: MantineSize \| number \| (string & {});\n\n /* Divider label, visible only with `orientation=\"horizontal\"` /\n label?: React.ReactNode;\n\n /* Label position @default 'center' /\n labelPosition?: 'left' \| 'center' \| 'right';\n\n /* Divider orientation @default 'horizontal' */\n orientation?: 'horizontal' \| 'vertical';\n}\n\nexport type DividerFactory = Factory<{\n props: DividerProps;\n ref: HTMLDivElement;\n stylesNames: DividerStylesNames;\n vars: DividerCssVariables;\n variant: DividerVariant;\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<DividerProps>;\n\nconst varsResolver = createVarsResolver<DividerFactory>((theme, { color, variant, size }) => ({\n root: {\n '--divider-color': color ? getThemeColor(color, theme) : undefined,\n '--divider-border-style': variant,\n '--divider-size': getSize(size, 'divider-size'),\n },\n}));\n\nexport const Divider = factory<DividerFactory>((_props) => {\n const props = useProps('Divider', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n orientation,\n label,\n labelPosition,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DividerFactory>({\n name: 'Divider',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box\n mod={[{ orientation, withLabel: !!label }, mod]}\n role=\"separator\"\n {...getStyles('root')}\n {...others}\n >\n {label && (\n <Box component=\"span\" mod={{ position: labelPosition }} {...getStyles('label')}>\n {label}\n </Box>\n )}\n </Box>\n );\n});\n\nDivider.classes = classes;\nDivider.varsResolver = varsResolver;\nDivider.displayName = '@mantine/core/Divider';\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,eAAe,EACnB,aAAa,cACd;AAED,MAAM,eAAe,oBAAoC,OAAO,EAAE,OAAO,SAAS,YAAY,EAC5F,MAAM;CACJ,mBAAmB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;CACzD,0BAA0B;CAC1B,kBAAkB,QAAQ,MAAM,eAAe;CAChD,EACF,EAAE;AAEH,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,aACA,OACA,eACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,KAAK,CAAC;GAAE;GAAa,WAAW,CAAC,CAAC;GAAO,EAAE,IAAI;EAC/C,MAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;YAEH,SACC,oBAAC,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,UAAU,eAAe;GAAE,GAAI,UAAU,QAAQ;aAC3E;GACG,CAAA;EAEJ,CAAA;EAER;AAEF,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}
1	+ {"version":3,"file":"Divider.mjs","names":["classes"],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n getThemeColor,\n MantineColor,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Divider.module.css';\n\nexport type DividerStylesNames = 'root' \| 'label';\nexport type DividerVariant = 'solid' \| 'dashed' \| 'dotted';\nexport type DividerCssVariables = {\n root: '--divider-color' \| '--divider-border-style' \| '--divider-size';\n};\n\nexport interface DividerProps\n extends BoxProps, StylesApiProps<DividerFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color value /\n color?: MantineColor;\n\n /* Controls width/height (depends on orientation) @default 'xs' /\n size?: MantineSize \| number \| (string & {});\n\n /* Divider label, visible only with `orientation=\"horizontal\"` /\n label?: React.ReactNode;\n\n /* Label position @default 'center' /\n labelPosition?: 'left' \| 'center' \| 'right';\n\n /* Divider orientation @default 'horizontal' */\n orientation?: 'horizontal' \| 'vertical';\n}\n\nexport type DividerFactory = Factory<{\n props: DividerProps;\n ref: HTMLDivElement;\n stylesNames: DividerStylesNames;\n vars: DividerCssVariables;\n variant: DividerVariant;\n}>;\n\nconst defaultProps = {\n orientation: 'horizontal',\n} satisfies Partial<DividerProps>;\n\nconst varsResolver = createVarsResolver<DividerFactory>((theme, { color, variant, size }) => ({\n root: {\n '--divider-color': color ? getThemeColor(color, theme) : undefined,\n '--divider-border-style': variant,\n '--divider-size': getSize(size, 'divider-size'),\n },\n}));\n\nexport const Divider = factory<DividerFactory>((_props) => {\n const props = useProps('Divider', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n color,\n orientation,\n label,\n labelPosition,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DividerFactory>({\n name: 'Divider',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box\n mod={[{ orientation, withLabel: !!label }, mod]}\n role=\"separator\"\n {...getStyles('root')}\n {...others}\n >\n {label && (\n <Box component=\"span\" mod={{ position: labelPosition }} {...getStyles('label')}>\n {label}\n </Box>\n )}\n </Box>\n );\n});\n\nDivider.classes = classes;\nDivider.varsResolver = varsResolver;\nDivider.displayName = '@mantine/core/Divider';\n\nexport namespace Divider {\n export type Props = DividerProps;\n export type StylesNames = DividerStylesNames;\n export type CssVariables = DividerCssVariables;\n export type Factory = DividerFactory;\n export type Variant = DividerVariant;\n}\n"],"mappings":";;;;;;;;;;;AAiDA,MAAM,eAAe,EACnB,aAAa,cACd;AAED,MAAM,eAAe,oBAAoC,OAAO,EAAE,OAAO,SAAS,YAAY,EAC5F,MAAM;CACJ,mBAAmB,QAAQ,cAAc,OAAO,MAAM,GAAG,KAAA;CACzD,0BAA0B;CAC1B,kBAAkB,QAAQ,MAAM,eAAe;CAChD,EACF,EAAE;AAEH,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,aACA,OACA,eACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,KAAD;EACE,KAAK,CAAC;GAAE;GAAa,WAAW,CAAC,CAAC;GAAO,EAAE,IAAI;EAC/C,MAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;YAEH,SACC,oBAAC,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,UAAU,eAAe;GAAE,GAAI,UAAU,QAAQ;aAC3E;GACG,CAAA;EAEJ,CAAA;EAER;AAEF,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Fieldset.mjs","names":["classes"],"sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Fieldset.module.css';\n\nexport type FieldsetStylesNames = 'root' \| 'legend';\nexport type FieldsetVariant = 'default' \| 'filled' \| 'unstyled';\nexport type FieldsetCSSVariables = {\n root: '--fieldset-radius';\n};\n\nexport interface FieldsetProps\n extends BoxProps, StylesApiProps<FieldsetFactory>, ElementProps<'fieldset'> {\n /** Fieldset legend /\n legend?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n}\n\nexport type FieldsetFactory = Factory<{\n props: FieldsetProps;\n ref: HTMLFieldSetElement;\n stylesNames: FieldsetStylesNames;\n vars: FieldsetCSSVariables;\n variant: FieldsetVariant;\n}>;\n\nconst defaultProps = {\n variant: 'default',\n} satisfies Partial<FieldsetProps>;\n\nconst varsResolver = createVarsResolver<FieldsetFactory>((_, { radius }) => ({\n root: {\n '--fieldset-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const Fieldset = factory<FieldsetFactory>((_props) => {\n const props = useProps('Fieldset', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n legend,\n variant,\n children,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FieldsetFactory>({\n name: 'Fieldset',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box component=\"fieldset\" variant={variant} {...getStyles('root', { variant })} {...others}>\n {legend && <legend {...getStyles('legend', { variant })}>{legend}</legend>}\n {children}\n </Box>\n );\n});\n\nFieldset.classes = classes;\nFieldset.varsResolver = varsResolver;\nFieldset.displayName = '@mantine/core/Fieldset';\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe,EACnB,SAAS,WACV;AAED,MAAM,eAAe,oBAAqC,GAAG,EAAE,cAAc,EAC3E,MAAM,EACJ,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO,EAC1E,EACF,EAAE;AAEH,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAoB;EAAS,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EAAE,GAAI;YAApF,CACG,UAAU,oBAAC,UAAD;GAAQ,GAAI,UAAU,UAAU,EAAE,SAAS,CAAC;aAAG;GAAgB,CAAA,EACzE,SACG;;EAER;AAEF,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}
1	+ {"version":3,"file":"Fieldset.mjs","names":["classes"],"sources":["../../../src/components/Fieldset/Fieldset.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Fieldset.module.css';\n\nexport type FieldsetStylesNames = 'root' \| 'legend';\nexport type FieldsetVariant = 'default' \| 'filled' \| 'unstyled';\nexport type FieldsetCSSVariables = {\n root: '--fieldset-radius';\n};\n\nexport interface FieldsetProps\n extends BoxProps, StylesApiProps<FieldsetFactory>, ElementProps<'fieldset'> {\n /** Fieldset legend /\n legend?: React.ReactNode;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n}\n\nexport type FieldsetFactory = Factory<{\n props: FieldsetProps;\n ref: HTMLFieldSetElement;\n stylesNames: FieldsetStylesNames;\n vars: FieldsetCSSVariables;\n variant: FieldsetVariant;\n}>;\n\nconst defaultProps = {\n variant: 'default',\n} satisfies Partial<FieldsetProps>;\n\nconst varsResolver = createVarsResolver<FieldsetFactory>((_, { radius }) => ({\n root: {\n '--fieldset-radius': radius === undefined ? undefined : getRadius(radius),\n },\n}));\n\nexport const Fieldset = factory<FieldsetFactory>((_props) => {\n const props = useProps('Fieldset', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n legend,\n variant,\n children,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FieldsetFactory>({\n name: 'Fieldset',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box component=\"fieldset\" variant={variant} {...getStyles('root', { variant })} {...others}>\n {legend && <legend {...getStyles('legend', { variant })}>{legend}</legend>}\n {children}\n </Box>\n );\n});\n\nFieldset.classes = classes;\nFieldset.varsResolver = varsResolver;\nFieldset.displayName = '@mantine/core/Fieldset';\n\nexport namespace Fieldset {\n export type Props = FieldsetProps;\n export type StylesNames = FieldsetStylesNames;\n export type Factory = FieldsetFactory;\n export type Variant = FieldsetVariant;\n}\n"],"mappings":";;;;;;;;;;AAsCA,MAAM,eAAe,EACnB,SAAS,WACV;AAED,MAAM,eAAe,oBAAqC,GAAG,EAAE,cAAc,EAC3E,MAAM,EACJ,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,OAAO,EAC1E,EACF,EAAE;AAEH,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,OAAO;CACxD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,qBAAC,KAAD;EAAK,WAAU;EAAoB;EAAS,GAAI,UAAU,QAAQ,EAAE,SAAS,CAAC;EAAE,GAAI;YAApF,CACG,UAAU,oBAAC,UAAD;GAAQ,GAAI,UAAU,UAAU,EAAE,SAAS,CAAC;aAAG;GAAgB,CAAA,EACzE,SACG;;EAER;AAEF,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileButton.mjs","names":[],"sources":["../../../src/components/FileButton/FileButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { assignRef, useMergedRef } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../core';\n\nexport interface FileButtonProps<Multiple extends boolean = false> {\n ref?: React.Ref<HTMLInputElement>;\n\n /** Called when files are picked /\n onChange: (payload: Multiple extends true ? File[] : File \| null) => void;\n\n /* Function that receives button props and returns react node that should be rendered /\n children: (props: { onClick: () => void }) => React.ReactNode;\n\n /* If set, user can pick more than one file /\n multiple?: Multiple;\n\n /* File input accept attribute, for example, `\"image/png,image/jpeg\"` /\n accept?: string;\n\n /* Input name attribute /\n name?: string;\n\n /* Input form attribute /\n form?: string;\n\n /* Reference of the function that should be called when value changes to null or empty array /\n resetRef?: React.Ref<() => void>;\n\n /* Disables file picker /\n disabled?: boolean;\n\n /* Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. /\n capture?: boolean \| 'user' \| 'environment';\n\n /* Passes down props to the input element used to capture files */\n inputProps?: React.ComponentProps<'input'>;\n}\n\nexport type FileButtonFactory = Factory<{\n props: FileButtonProps;\n signature: <Multiple extends boolean = false>(\n props: FileButtonProps<Multiple>\n ) => React.JSX.Element;\n}>;\n\nexport const FileButton = genericFactory<FileButtonFactory>((props) => {\n const {\n onChange,\n children,\n multiple,\n accept,\n name,\n form,\n resetRef,\n disabled,\n capture,\n inputProps,\n ref,\n ...others\n } = useProps('FileButton', null, props);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const onClick = () => {\n !disabled && inputRef.current?.click();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.currentTarget.files === null) {\n return onChange(multiple ? ([] as any) : null);\n }\n\n if (multiple) {\n onChange(Array.from(event.currentTarget.files) as any);\n } else {\n onChange((event.currentTarget.files[0] as any) \|\| null);\n }\n };\n\n const reset = () => {\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n };\n\n assignRef(resetRef, reset);\n\n return (\n <>\n <input\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n onChange={handleChange}\n ref={useMergedRef(ref, inputRef)}\n name={name}\n form={form}\n capture={capture}\n {...inputProps}\n />\n\n {children({ onClick, ...others })}\n </>\n );\n});\n\nFileButton.displayName = '@mantine/core/FileButton';\n"],"mappings":";;;;;;;AA6CA,MAAa,aAAa,gBAAmC,UAAU;CACrE,MAAM,EACJ,UACA,UACA,UACA,QACA,MACA,MACA,UACA,UACA,SACA,YACA,KACA,GAAG,WACD,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,gBAAgB;AACpB,GAAC,YAAY,SAAS,SAAS,OAAO;;CAGxC,MAAM,gBAAgB,UAA+C;AACnE,MAAI,MAAM,cAAc,UAAU,KAChC,QAAO,SAAS,WAAY,EAAE,GAAW,KAAK;AAGhD,MAAI,SACF,UAAS,MAAM,KAAK,MAAM,cAAc,MAAM,CAAQ;MAEtD,UAAU,MAAM,cAAc,MAAM,MAAc,KAAK;;CAI3D,MAAM,cAAc;AAClB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ;;AAI7B,WAAU,UAAU,MAAM;AAE1B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,OAAO,EAAE,SAAS,QAAQ;EAC1B,MAAK;EACG;EACE;EACV,UAAU;EACV,KAAK,aAAa,KAAK,SAAS;EAC1B;EACA;EACG;EACT,GAAI;EACJ,CAAA,EAED,SAAS;EAAE;EAAS,GAAG;EAAQ,CAAC,CAChC,EAAA,CAAA;EAEL;AAEF,WAAW,cAAc"}
1	+ {"version":3,"file":"FileButton.mjs","names":[],"sources":["../../../src/components/FileButton/FileButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { assignRef, useMergedRef } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../core';\n\nexport interface FileButtonProps<Multiple extends boolean = false> {\n ref?: React.Ref<HTMLInputElement>;\n\n /** Called when files are picked /\n onChange: (payload: Multiple extends true ? File[] : File \| null) => void;\n\n /* Function that receives button props and returns react node that should be rendered /\n children: (props: { onClick: () => void }) => React.ReactNode;\n\n /* If set, user can pick more than one file /\n multiple?: Multiple;\n\n /* File input accept attribute, for example, `\"image/png,image/jpeg\"` /\n accept?: string;\n\n /* Input name attribute /\n name?: string;\n\n /* Input form attribute /\n form?: string;\n\n /* Reference of the function that should be called when value changes to null or empty array /\n resetRef?: React.Ref<() => void>;\n\n /* Disables file picker /\n disabled?: boolean;\n\n /* Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. /\n capture?: boolean \| 'user' \| 'environment';\n\n /* Passes down props to the input element used to capture files */\n inputProps?: React.ComponentProps<'input'>;\n}\n\nexport type FileButtonFactory = Factory<{\n props: FileButtonProps;\n signature: <Multiple extends boolean = false>(\n props: FileButtonProps<Multiple>\n ) => React.JSX.Element;\n}>;\n\nexport const FileButton = genericFactory<FileButtonFactory>((props) => {\n const {\n onChange,\n children,\n multiple,\n accept,\n name,\n form,\n resetRef,\n disabled,\n capture,\n inputProps,\n ref,\n ...others\n } = useProps('FileButton', null, props);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const onClick = () => {\n !disabled && inputRef.current?.click();\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (event.currentTarget.files === null) {\n return onChange(multiple ? ([] as any) : null);\n }\n\n if (multiple) {\n onChange(Array.from(event.currentTarget.files) as any);\n } else {\n onChange((event.currentTarget.files[0] as any) \|\| null);\n }\n };\n\n const reset = () => {\n if (inputRef.current) {\n inputRef.current.value = '';\n }\n };\n\n assignRef(resetRef, reset);\n\n return (\n <>\n <input\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n onChange={handleChange}\n ref={useMergedRef(ref, inputRef)}\n name={name}\n form={form}\n capture={capture}\n {...inputProps}\n />\n\n {children({ onClick, ...others })}\n </>\n );\n});\n\nFileButton.displayName = '@mantine/core/FileButton';\n\nexport namespace FileButton {\n export type Props<Multiple extends boolean = false> = FileButtonProps<Multiple>;\n export type Factory = FileButtonFactory;\n}\n"],"mappings":";;;;;;;AA6CA,MAAa,aAAa,gBAAmC,UAAU;CACrE,MAAM,EACJ,UACA,UACA,UACA,QACA,MACA,MACA,UACA,UACA,SACA,YACA,KACA,GAAG,WACD,SAAS,cAAc,MAAM,MAAM;CAEvC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,gBAAgB;AACpB,GAAC,YAAY,SAAS,SAAS,OAAO;;CAGxC,MAAM,gBAAgB,UAA+C;AACnE,MAAI,MAAM,cAAc,UAAU,KAChC,QAAO,SAAS,WAAY,EAAE,GAAW,KAAK;AAGhD,MAAI,SACF,UAAS,MAAM,KAAK,MAAM,cAAc,MAAM,CAAQ;MAEtD,UAAU,MAAM,cAAc,MAAM,MAAc,KAAK;;CAI3D,MAAM,cAAc;AAClB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ;;AAI7B,WAAU,UAAU,MAAM;AAE1B,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EACE,OAAO,EAAE,SAAS,QAAQ;EAC1B,MAAK;EACG;EACE;EACV,UAAU;EACV,KAAK,aAAa,KAAK,SAAS;EAC1B;EACA;EACG;EACT,GAAI;EACJ,CAAA,EAED,SAAS;EAAE;EAAS,GAAG;EAAQ,CAAC,CAChC,EAAA,CAAA;EAEL;AAEF,WAAW,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n Input,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<FileInputFactory>,\n ElementProps<'button', 'value' \| 'defaultValue' \| 'onChange' \| 'placeholder'> {\n component?: any;\n\n /** Called when value changes /\n onChange?: (payload: Multiple extends true ? File[] : File \| null) => void;\n\n /* Controlled component value /\n value?: Multiple extends true ? File[] : File \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Multiple extends true ? File[] : File \| null;\n\n /* If set, user can pick more than one file @default false /\n multiple?: Multiple;\n\n /* File input accept attribute, for example, `\"image/png,image/jpeg\"` /\n accept?: string;\n\n /* Input name attribute /\n name?: string;\n\n /* Input form attribute /\n form?: string;\n\n /* Value renderer. By default, displays file name. /\n valueComponent?: React.FC<{ value: null \| File \| File[] }>;\n\n /* If set, the clear button is displayed in the right section @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: React.ComponentProps<'button'>;\n\n /* If set, the input value cannot be changed /\n readOnly?: boolean;\n\n /* Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. /\n capture?: boolean \| 'user' \| 'environment';\n\n /* Props passed down to the hidden `input[type=\"file\"]` /\n fileInputProps?: React.ComponentProps<'input'>;\n\n /* Input placeholder /\n placeholder?: React.ReactNode;\n\n /* Reference of the function that should be called when value changes to null or empty array */\n resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n props: FileInputProps;\n ref: HTMLButtonElement;\n stylesNames: __InputStylesNames \| 'placeholder';\n variant: InputVariant;\n signature: <Multiple extends boolean = false>(\n props: FileInputProps<Multiple>\n ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n </div>\n);\n\nconst defaultProps = {\n valueComponent: DefaultValue,\n size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n const props = useProps('FileInput', defaultProps, _props);\n const {\n unstyled,\n vars,\n onChange,\n value,\n defaultValue,\n multiple,\n accept,\n name,\n form,\n valueComponent: ValueComponent,\n clearable,\n clearSectionMode,\n clearButtonProps,\n readOnly,\n capture,\n fileInputProps,\n rightSection,\n size,\n placeholder,\n component,\n resetRef: resetRefProp,\n classNames,\n styles,\n attributes,\n ...others\n } = props;\n\n const resetRef = useRef<() => void>(null);\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [_value, setValue] = useUncontrolled<null \| File \| File[]>({\n value,\n defaultValue,\n onChange: onChange as any,\n finalValue: multiple ? [] : null,\n });\n\n const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n const clearButton = (\n <CloseButton\n {...clearButtonProps}\n variant=\"subtle\"\n onClick={() => setValue(multiple ? [] : null)}\n size={size}\n unstyled={unstyled}\n />\n );\n\n const _clearable = clearable && hasValue && !readOnly;\n\n useEffect(() => {\n if ((Array.isArray(_value) && _value.length === 0) \|\| _value === null) {\n resetRef.current?.();\n }\n }, [_value]);\n\n return (\n <FileButton\n onChange={setValue}\n multiple={multiple}\n accept={accept}\n name={name}\n form={form}\n resetRef={useMergedRef(resetRef, resetRefProp)}\n disabled={readOnly}\n capture={capture}\n inputProps={fileInputProps}\n >\n {(fileButtonProps) => (\n <InputBase\n component={component \|\| 'button'}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n {...fileButtonProps}\n {...others}\n __staticSelector=\"FileInput\"\n multiline\n type=\"button\"\n pointer\n __stylesApiProps={props}\n unstyled={unstyled}\n size={size}\n classNames={classNames}\n styles={styles}\n attributes={attributes}\n >\n {!hasValue ? (\n <Input.Placeholder\n __staticSelector=\"FileInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n attributes={attributes}\n >\n {placeholder}\n </Input.Placeholder>\n ) : (\n <ValueComponent value={_value} />\n )}\n </InputBase>\n )}\n </FileButton>\n );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n"],"mappings":";;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,oBAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAmB,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmB,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,YAAY,gBAAsC;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,oBAAC,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,oBAAC,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,UAAU,aAAa,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,oBAAC,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,oBAAC,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,oBAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
1	+ {"version":3,"file":"FileInput.mjs","names":[],"sources":["../../../src/components/FileInput/FileInput.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n genericFactory,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport { CloseButton } from '../CloseButton';\nimport { FileButton } from '../FileButton';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n Input,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase/InputBase';\n\nexport interface FileInputProps<Multiple = false>\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<FileInputFactory>,\n ElementProps<'button', 'value' \| 'defaultValue' \| 'onChange' \| 'placeholder'> {\n component?: any;\n\n /** Called when value changes /\n onChange?: (payload: Multiple extends true ? File[] : File \| null) => void;\n\n /* Controlled component value /\n value?: Multiple extends true ? File[] : File \| null;\n\n /* Uncontrolled component default value /\n defaultValue?: Multiple extends true ? File[] : File \| null;\n\n /* If set, user can pick more than one file @default false /\n multiple?: Multiple;\n\n /* File input accept attribute, for example, `\"image/png,image/jpeg\"` /\n accept?: string;\n\n /* Input name attribute /\n name?: string;\n\n /* Input form attribute /\n form?: string;\n\n /* Value renderer. By default, displays file name. /\n valueComponent?: React.FC<{ value: null \| File \| File[] }>;\n\n /* If set, the clear button is displayed in the right section @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: React.ComponentProps<'button'>;\n\n /* If set, the input value cannot be changed /\n readOnly?: boolean;\n\n /* Specifies that, optionally, a new file should be captured, and which device should be used to capture that new media of a type defined by the accept attribute. /\n capture?: boolean \| 'user' \| 'environment';\n\n /* Props passed down to the hidden `input[type=\"file\"]` /\n fileInputProps?: React.ComponentProps<'input'>;\n\n /* Input placeholder /\n placeholder?: React.ReactNode;\n\n /* Reference of the function that should be called when value changes to null or empty array */\n resetRef?: React.Ref<() => void>;\n}\n\nexport type FileInputFactory = Factory<{\n props: FileInputProps;\n ref: HTMLButtonElement;\n stylesNames: __InputStylesNames \| 'placeholder';\n variant: InputVariant;\n signature: <Multiple extends boolean = false>(\n props: FileInputProps<Multiple>\n ) => React.JSX.Element;\n}>;\n\nconst DefaultValue: FileInputProps['valueComponent'] = ({ value }) => (\n <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>\n {Array.isArray(value) ? value.map((file) => file.name).join(', ') : value?.name}\n </div>\n);\n\nconst defaultProps = {\n valueComponent: DefaultValue,\n size: 'sm',\n} satisfies Partial<FileInputProps>;\n\nexport const FileInput = genericFactory<FileInputFactory>((_props) => {\n const props = useProps('FileInput', defaultProps, _props);\n const {\n unstyled,\n vars,\n onChange,\n value,\n defaultValue,\n multiple,\n accept,\n name,\n form,\n valueComponent: ValueComponent,\n clearable,\n clearSectionMode,\n clearButtonProps,\n readOnly,\n capture,\n fileInputProps,\n rightSection,\n size,\n placeholder,\n component,\n resetRef: resetRefProp,\n classNames,\n styles,\n attributes,\n ...others\n } = props;\n\n const resetRef = useRef<() => void>(null);\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<FileInputFactory>({\n classNames,\n styles,\n props,\n });\n\n const [_value, setValue] = useUncontrolled<null \| File \| File[]>({\n value,\n defaultValue,\n onChange: onChange as any,\n finalValue: multiple ? [] : null,\n });\n\n const hasValue = Array.isArray(_value) ? _value.length !== 0 : _value !== null;\n\n const clearButton = (\n <CloseButton\n {...clearButtonProps}\n variant=\"subtle\"\n onClick={() => setValue(multiple ? [] : null)}\n size={size}\n unstyled={unstyled}\n />\n );\n\n const _clearable = clearable && hasValue && !readOnly;\n\n useEffect(() => {\n if ((Array.isArray(_value) && _value.length === 0) \|\| _value === null) {\n resetRef.current?.();\n }\n }, [_value]);\n\n return (\n <FileButton\n onChange={setValue}\n multiple={multiple}\n accept={accept}\n name={name}\n form={form}\n resetRef={useMergedRef(resetRef, resetRefProp)}\n disabled={readOnly}\n capture={capture}\n inputProps={fileInputProps}\n >\n {(fileButtonProps) => (\n <InputBase\n component={component \|\| 'button'}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n {...fileButtonProps}\n {...others}\n __staticSelector=\"FileInput\"\n multiline\n type=\"button\"\n pointer\n __stylesApiProps={props}\n unstyled={unstyled}\n size={size}\n classNames={classNames}\n styles={styles}\n attributes={attributes}\n >\n {!hasValue ? (\n <Input.Placeholder\n __staticSelector=\"FileInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n attributes={attributes}\n >\n {placeholder}\n </Input.Placeholder>\n ) : (\n <ValueComponent value={_value} />\n )}\n </InputBase>\n )}\n </FileButton>\n );\n});\n\nFileInput.classes = InputBase.classes;\nFileInput.displayName = '@mantine/core/FileInput';\n\nexport namespace FileInput {\n export type Props<Multiple extends boolean = false> = FileInputProps<Multiple>;\n export type Factory = FileInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAyFA,MAAM,gBAAkD,EAAE,YACxD,oBAAC,OAAD;CAAK,OAAO;EAAE,UAAU;EAAU,cAAc;EAAY,YAAY;EAAU;WAC/E,MAAM,QAAQ,MAAM,GAAG,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,KAAK,GAAG,OAAO;CACvE,CAAA;AAGR,MAAM,eAAe;CACnB,gBAAgB;CAChB,MAAM;CACP;AAED,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,UACA,MACA,UACA,OACA,cACA,UACA,QACA,MACA,MACA,gBAAgB,gBAChB,WACA,kBACA,kBACA,UACA,SACA,gBACA,cACA,MACA,aACA,WACA,UAAU,cACV,YACA,QACA,YACA,GAAG,WACD;CAEJ,MAAM,WAAW,OAAmB,KAAK;CACzC,MAAM,EAAE,oBAAoB,mBAAmB,qBAAuC;EACpF;EACA;EACA;EACD,CAAC;CAEF,MAAM,CAAC,QAAQ,YAAY,gBAAsC;EAC/D;EACA;EACU;EACV,YAAY,WAAW,EAAE,GAAG;EAC7B,CAAC;CAEF,MAAM,WAAW,MAAM,QAAQ,OAAO,GAAG,OAAO,WAAW,IAAI,WAAW;CAE1E,MAAM,cACJ,oBAAC,aAAD;EACE,GAAI;EACJ,SAAQ;EACR,eAAe,SAAS,WAAW,EAAE,GAAG,KAAK;EACvC;EACI;EACV,CAAA;CAGJ,MAAM,aAAa,aAAa,YAAY,CAAC;AAE7C,iBAAgB;AACd,MAAK,MAAM,QAAQ,OAAO,IAAI,OAAO,WAAW,KAAM,WAAW,KAC/D,UAAS,WAAW;IAErB,CAAC,OAAO,CAAC;AAEZ,QACE,oBAAC,YAAD;EACE,UAAU;EACA;EACF;EACF;EACA;EACN,UAAU,aAAa,UAAU,aAAa;EAC9C,UAAU;EACD;EACT,YAAY;aAEV,oBACA,oBAAC,WAAD;GACE,WAAW,aAAa;GACV;GACd,gBAAgB;GAChB,aAAa;GACb,oBAAoB;GACpB,GAAI;GACJ,GAAI;GACJ,kBAAiB;GACjB,WAAA;GACA,MAAK;GACL,SAAA;GACA,kBAAkB;GACR;GACJ;GACM;GACJ;GACI;aAEX,CAAC,WACA,oBAAC,MAAM,aAAP;IACE,kBAAiB;IACjB,YAAY;IACZ,QAAQ;IACI;cAEX;IACiB,CAAA,GAEpB,oBAAC,gBAAD,EAAgB,OAAO,QAAU,CAAA;GAEzB,CAAA;EAEH,CAAA;EAEf;AAEF,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.mjs","names":["classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n filterProps,\n InlineStyles,\n MantineSpacing,\n parseStyleProps,\n polymorphicFactory,\n PolymorphicFactory,\n StyleProp,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n /** `gap` CSS property /\n gap?: StyleProp<MantineSpacing>;\n\n /* `row-gap` CSS property /\n rowGap?: StyleProp<MantineSpacing>;\n\n /* `column-gap` CSS property /\n columnGap?: StyleProp<MantineSpacing>;\n\n /* `align-items` CSS property /\n align?: StyleProp<React.CSSProperties['alignItems']>;\n\n /* `justify-content` CSS property /\n justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n /* `flex-wrap` CSS property /\n wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n /* `flex-direction` CSS property */\n direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n props: FlexProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n const props = useProps('Flex', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n gap,\n rowGap,\n columnGap,\n align,\n justify,\n wrap,\n direction,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const theme = useMantineTheme();\n const responsiveClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n theme,\n data: FLEX_STYLE_PROPS_DATA,\n });\n\n return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n <InlineStyles\n selector={`.${responsiveClassName}`}\n styles={parsedStyleProps.styles}\n media={parsedStyleProps.media}\n />\n )}\n <Box\n {...getStyles('root', {\n className: responsiveClassName,\n style: filterProps(parsedStyleProps.inlineStyles),\n })}\n {...others}\n />\n </>\n );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,sBAAsB,oBAAoB;CAChD,MAAM,mBAAmB,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAM;EACP,CAAC;AAEF,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAEJ,oBAAC,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAO,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUA;AACf,KAAK,cAAc"}
1	+ {"version":3,"file":"Flex.mjs","names":["classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n filterProps,\n InlineStyles,\n MantineSpacing,\n parseStyleProps,\n polymorphicFactory,\n PolymorphicFactory,\n StyleProp,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n /** `gap` CSS property /\n gap?: StyleProp<MantineSpacing>;\n\n /* `row-gap` CSS property /\n rowGap?: StyleProp<MantineSpacing>;\n\n /* `column-gap` CSS property /\n columnGap?: StyleProp<MantineSpacing>;\n\n /* `align-items` CSS property /\n align?: StyleProp<React.CSSProperties['alignItems']>;\n\n /* `justify-content` CSS property /\n justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n /* `flex-wrap` CSS property /\n wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n /* `flex-direction` CSS property */\n direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n props: FlexProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n const props = useProps('Flex', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n gap,\n rowGap,\n columnGap,\n align,\n justify,\n wrap,\n direction,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const theme = useMantineTheme();\n const responsiveClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n theme,\n data: FLEX_STYLE_PROPS_DATA,\n });\n\n return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n <InlineStyles\n selector={`.${responsiveClassName}`}\n styles={parsedStyleProps.styles}\n media={parsedStyleProps.media}\n />\n )}\n <Box\n {...getStyles('root', {\n className: responsiveClassName,\n style: filterProps(parsedStyleProps.inlineStyles),\n })}\n {...others}\n />\n </>\n );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n\nexport namespace Flex {\n export type Props = FlexProps;\n export type StylesNames = FlexStylesNames;\n export type Factory = FlexFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQ,iBAAiB;CAC/B,MAAM,sBAAsB,oBAAoB;CAChD,MAAM,mBAAmB,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAM;EACP,CAAC;AAEF,QACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAEJ,oBAAC,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAO,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUA;AACf,KAAK,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingIndicator.mjs","names":["classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n /** Target element over which the indicator is displayed.\n * The indicator will be positioned to match the target's size and position.\n * /\n target: HTMLElement \| null \| undefined;\n\n /* Parent container element that must have `position: relative`.\n * The indicator's position is calculated relative to this element.\n * /\n parent: HTMLElement \| null \| undefined;\n\n /* Transition duration in ms @default 150 /\n transitionDuration?: number \| string;\n\n /* Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n * the indicator from appearing at the wrong position during the parent's animation.\n * @default false\n * /\n displayAfterTransitionEnd?: boolean;\n\n /* Called when the indicator starts transitioning to a new position /\n onTransitionStart?: () => void;\n\n /* Called when the indicator finishes transitioning to a new position */\n onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n props: FloatingIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: FloatingIndicatorStylesNames;\n vars: FloatingIndicatorCssVariables;\n ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n (theme, { transitionDuration }, { shouldReduceMotion }) => {\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion\n ? '0ms'\n : typeof transitionDuration === 'number'\n ? `${transitionDuration}ms`\n : transitionDuration \|\| '150ms';\n\n return {\n root: {\n '--transition-duration': duration,\n },\n };\n }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n const props = useProps('FloatingIndicator', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n target,\n parent,\n transitionDuration,\n mod,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n attributes,\n ref,\n ...others\n } = props;\n\n const shouldReduceMotion = useReducedMotion();\n\n const getStyles = useStyles<FloatingIndicatorFactory>({\n name: 'FloatingIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { shouldReduceMotion },\n });\n\n const innerRef = useRef<HTMLDivElement>(null);\n const { initialized, hidden } = useFloatingIndicator({\n target,\n parent,\n ref: innerRef,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n });\n\n const mergedRef = useMergedRef(ref, innerRef);\n\n if (!target \|\| !parent) {\n return null;\n }\n\n return (\n <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;AA0DA,MAAM,eAAe,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;CAEzD,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB;AAE5B,QAAO,EACL,MAAM,EACJ,yBAAyB,UAC1B,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,MAAM,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,oBAdY,kBAAkB,EAcV;EAClC,CAAC;CAEF,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,aAAa,WAAW,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,aAAa,KAAK,SAAS;AAE7C,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;AAGT,QACE,oBAAC,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;GAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAEjG;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
1	+ {"version":3,"file":"FloatingIndicator.mjs","names":["classes"],"sources":["../../../src/components/FloatingIndicator/FloatingIndicator.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { useFloatingIndicator } from './use-floating-indicator';\nimport classes from './FloatingIndicator.module.css';\n\nexport type FloatingIndicatorStylesNames = 'root';\nexport type FloatingIndicatorCssVariables = {\n root: '--transition-duration';\n};\n\nexport interface FloatingIndicatorProps\n extends BoxProps, StylesApiProps<FloatingIndicatorFactory>, ElementProps<'div'> {\n /** Target element over which the indicator is displayed.\n * The indicator will be positioned to match the target's size and position.\n * /\n target: HTMLElement \| null \| undefined;\n\n /* Parent container element that must have `position: relative`.\n * The indicator's position is calculated relative to this element.\n * /\n parent: HTMLElement \| null \| undefined;\n\n /* Transition duration in ms @default 150 /\n transitionDuration?: number \| string;\n\n /* Controls whether the indicator should be hidden initially and displayed after the parent's transition ends.\n * Set to `true` when the parent container has CSS transitions (e.g., `transform: scale()`) to prevent\n * the indicator from appearing at the wrong position during the parent's animation.\n * @default false\n * /\n displayAfterTransitionEnd?: boolean;\n\n /* Called when the indicator starts transitioning to a new position /\n onTransitionStart?: () => void;\n\n /* Called when the indicator finishes transitioning to a new position */\n onTransitionEnd?: () => void;\n}\n\nexport type FloatingIndicatorFactory = Factory<{\n props: FloatingIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: FloatingIndicatorStylesNames;\n vars: FloatingIndicatorCssVariables;\n ctx: { shouldReduceMotion: boolean };\n}>;\n\nconst varsResolver = createVarsResolver<FloatingIndicatorFactory>(\n (theme, { transitionDuration }, { shouldReduceMotion }) => {\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion\n ? '0ms'\n : typeof transitionDuration === 'number'\n ? `${transitionDuration}ms`\n : transitionDuration \|\| '150ms';\n\n return {\n root: {\n '--transition-duration': duration,\n },\n };\n }\n);\n\nexport const FloatingIndicator = factory<FloatingIndicatorFactory>((_props) => {\n const props = useProps('FloatingIndicator', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n target,\n parent,\n transitionDuration,\n mod,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n attributes,\n ref,\n ...others\n } = props;\n\n const shouldReduceMotion = useReducedMotion();\n\n const getStyles = useStyles<FloatingIndicatorFactory>({\n name: 'FloatingIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n stylesCtx: { shouldReduceMotion },\n });\n\n const innerRef = useRef<HTMLDivElement>(null);\n const { initialized, hidden } = useFloatingIndicator({\n target,\n parent,\n ref: innerRef,\n displayAfterTransitionEnd,\n onTransitionStart,\n onTransitionEnd,\n });\n\n const mergedRef = useMergedRef(ref, innerRef);\n\n if (!target \|\| !parent) {\n return null;\n }\n\n return (\n <Box ref={mergedRef} mod={[{ initialized, hidden }, mod]} {...getStyles('root')} {...others} />\n );\n});\n\nFloatingIndicator.displayName = '@mantine/core/FloatingIndicator';\nFloatingIndicator.classes = classes;\nFloatingIndicator.varsResolver = varsResolver;\n\nexport namespace FloatingIndicator {\n export type Props = FloatingIndicatorProps;\n export type StylesNames = FloatingIndicatorStylesNames;\n export type CssVariables = FloatingIndicatorCssVariables;\n export type Factory = FloatingIndicatorFactory;\n}\n"],"mappings":";;;;;;;;;;;;AA0DA,MAAM,eAAe,oBAClB,OAAO,EAAE,sBAAsB,EAAE,yBAAyB;CAEzD,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SAEnE,QACA,OAAO,uBAAuB,WAC5B,GAAG,mBAAmB,MACtB,sBAAsB;AAE5B,QAAO,EACL,MAAM,EACJ,yBAAyB,UAC1B,EACF;EAEJ;AAED,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,MAAM,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,QACA,oBACA,KACA,2BACA,mBACA,iBACA,YACA,KACA,GAAG,WACD;CAIJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW,EAAE,oBAdY,kBAAkB,EAcV;EAClC,CAAC;CAEF,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,EAAE,aAAa,WAAW,qBAAqB;EACnD;EACA;EACA,KAAK;EACL;EACA;EACA;EACD,CAAC;CAEF,MAAM,YAAY,aAAa,KAAK,SAAS;AAE7C,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;AAGT,QACE,oBAAC,KAAD;EAAK,KAAK;EAAW,KAAK,CAAC;GAAE;GAAa;GAAQ,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAEjG;AAEF,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingWindow.mjs","names":["classes"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport {\n SetFloatingWindowPosition,\n useFloatingWindow,\n UseFloatingWindowOptions,\n useMergedRef,\n} from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n getDefaultZIndex,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n extends\n UseFloatingWindowOptions,\n PaperBaseProps,\n BoxProps,\n StylesApiProps<FloatingWindowFactory>,\n ElementProps<'div', keyof UseFloatingWindowOptions> {\n /** Assigns ref to set position programmatically /\n setPositionRef?: React.RefObject<SetFloatingWindowPosition \| null>;\n\n /* Determines whether the window should be rendered inside `Portal` @default true /\n withinPortal?: boolean;\n\n /* Props passed down to `Portal` component /\n portalProps?: Omit<PortalProps, 'children'>;\n\n /* `z-index` of the root element @default 400 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport type FloatingWindowFactory = Factory<{\n props: FloatingWindowProps;\n ref: HTMLDivElement;\n stylesNames: FloatingWindowStylesNames;\n}>;\n\nconst defaultProps = {\n constrainToViewport: true,\n zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n const props = useProps('FloatingWindow', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n mod,\n enabled,\n constrainToViewport,\n constrainOffset,\n dragHandleSelector,\n excludeDragHandleSelector,\n axis,\n initialPosition,\n onPositionChange,\n onDragStart,\n onDragEnd,\n setPositionRef,\n withinPortal,\n portalProps,\n zIndex,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<FloatingWindowFactory>({\n name: 'FloatingWindow',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n const floatingWindow = useFloatingWindow({\n enabled,\n constrainToViewport,\n constrainOffset,\n dragHandleSelector,\n excludeDragHandleSelector,\n axis,\n initialPosition,\n onPositionChange,\n onDragStart,\n onDragEnd,\n });\n\n useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n floatingWindow.setPosition,\n ]);\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Paper\n ref={useMergedRef(ref, floatingWindow.ref)}\n mod={[{ dragging: floatingWindow.isDragging }, mod]}\n {...getStyles('root')}\n {...others}\n __vars={{ '--floating-window-z-index': zIndex.toString() }}\n />\n </OptionalPortal>\n );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQ,iBAAiB,UAAU;CACpC;AAED,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,kBAAkB;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,qBAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,YAChB,CAAC;AAEF,QACE,oBAAC,gBAAD;EAA8B;EAAc,GAAI;YAC9C,oBAAC,OAAD;GACE,KAAK,aAAa,KAAK,eAAe,IAAI;GAC1C,KAAK,CAAC,EAAE,UAAU,eAAe,YAAY,EAAE,IAAI;GACnD,GAAI,UAAU,OAAO;GACrB,GAAI;GACJ,QAAQ,EAAE,6BAA6B,OAAO,UAAU,EAAE;GAC1D,CAAA;EACa,CAAA;EAEnB;AAEF,eAAe,cAAc;AAC7B,eAAe,UAAUA"}
1	+ {"version":3,"file":"FloatingWindow.mjs","names":["classes"],"sources":["../../../src/components/FloatingWindow/FloatingWindow.tsx"],"sourcesContent":["import { useImperativeHandle } from 'react';\nimport {\n SetFloatingWindowPosition,\n useFloatingWindow,\n UseFloatingWindowOptions,\n useMergedRef,\n} from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n getDefaultZIndex,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { OptionalPortal, PortalProps } from '../Portal';\nimport classes from './FloatingWindow.module.css';\n\nexport type FloatingWindowStylesNames = 'root';\n\nexport interface FloatingWindowProps\n extends\n UseFloatingWindowOptions,\n PaperBaseProps,\n BoxProps,\n StylesApiProps<FloatingWindowFactory>,\n ElementProps<'div', keyof UseFloatingWindowOptions> {\n /** Assigns ref to set position programmatically /\n setPositionRef?: React.RefObject<SetFloatingWindowPosition \| null>;\n\n /* Determines whether the window should be rendered inside `Portal` @default true /\n withinPortal?: boolean;\n\n /* Props passed down to `Portal` component /\n portalProps?: Omit<PortalProps, 'children'>;\n\n /* `z-index` of the root element @default 400 */\n zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport type FloatingWindowFactory = Factory<{\n props: FloatingWindowProps;\n ref: HTMLDivElement;\n stylesNames: FloatingWindowStylesNames;\n}>;\n\nconst defaultProps = {\n constrainToViewport: true,\n zIndex: getDefaultZIndex('overlay'),\n} satisfies Partial<FloatingWindowProps>;\n\nexport const FloatingWindow = factory<FloatingWindowFactory>((_props) => {\n const props = useProps('FloatingWindow', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n mod,\n enabled,\n constrainToViewport,\n constrainOffset,\n dragHandleSelector,\n excludeDragHandleSelector,\n axis,\n initialPosition,\n onPositionChange,\n onDragStart,\n onDragEnd,\n setPositionRef,\n withinPortal,\n portalProps,\n zIndex,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<FloatingWindowFactory>({\n name: 'FloatingWindow',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n vars,\n });\n\n const floatingWindow = useFloatingWindow({\n enabled,\n constrainToViewport,\n constrainOffset,\n dragHandleSelector,\n excludeDragHandleSelector,\n axis,\n initialPosition,\n onPositionChange,\n onDragStart,\n onDragEnd,\n });\n\n useImperativeHandle(setPositionRef, () => floatingWindow.setPosition, [\n floatingWindow.setPosition,\n ]);\n\n return (\n <OptionalPortal withinPortal={withinPortal} {...portalProps}>\n <Paper\n ref={useMergedRef(ref, floatingWindow.ref)}\n mod={[{ dragging: floatingWindow.isDragging }, mod]}\n {...getStyles('root')}\n {...others}\n __vars={{ '--floating-window-z-index': zIndex.toString() }}\n />\n </OptionalPortal>\n );\n});\n\nFloatingWindow.displayName = '@mantine/core/FloatingWindow';\nFloatingWindow.classes = classes;\n\nexport namespace FloatingWindow {\n export type Props = FloatingWindowProps;\n export type StylesNames = FloatingWindowStylesNames;\n export type Factory = FloatingWindowFactory;\n}\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,eAAe;CACnB,qBAAqB;CACrB,QAAQ,iBAAiB,UAAU;CACpC;AAED,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,SACA,qBACA,iBACA,oBACA,2BACA,MACA,iBACA,kBACA,aACA,WACA,gBACA,cACA,aACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,kBAAkB;EACvC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,qBAAoB,sBAAsB,eAAe,aAAa,CACpE,eAAe,YAChB,CAAC;AAEF,QACE,oBAAC,gBAAD;EAA8B;EAAc,GAAI;YAC9C,oBAAC,OAAD;GACE,KAAK,aAAa,KAAK,eAAe,IAAI;GAC1C,KAAK,CAAC,EAAE,UAAU,eAAe,YAAY,EAAE,IAAI;GACnD,GAAI,UAAU,OAAO;GACrB,GAAI;GACJ,QAAQ,EAAE,6BAA6B,OAAO,UAAU,EAAE;GAC1D,CAAA;EACa,CAAA;EAEnB;AAEF,eAAe,cAAc;AAC7B,eAAe,UAAUA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.mjs","names":["classes"],"sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n MantineSpacing,\n StyleProp,\n StylesApiProps,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { GridBreakpoints, GridProvider } from './Grid.context';\nimport { GridCol } from './GridCol/GridCol';\nimport { GridVariables } from './GridVariables';\nimport classes from './Grid.module.css';\n\nexport type GridStylesNames = 'root' \| 'col' \| 'inner' \| 'container';\nexport type GridCssVariables = {\n root: '--grid-justify' \| '--grid-align' \| '--grid-overflow';\n};\n\nexport interface GridProps extends BoxProps, StylesApiProps<GridFactory>, ElementProps<'div'> {\n /** Gap between columns and rows, key of `theme.spacing` or any valid CSS value @default 'md' /\n gap?: StyleProp<MantineSpacing>;\n\n /* Row gap, overrides `gap` for vertical spacing /\n rowGap?: StyleProp<MantineSpacing>;\n\n /* Column gap, overrides `gap` for horizontal spacing /\n columnGap?: StyleProp<MantineSpacing>;\n\n /* If set, columns in the last row expand to fill all available space @default false /\n grow?: boolean;\n\n /* Sets `justify-content` @default flex-start /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Sets `align-items` @default stretch /\n align?: React.CSSProperties['alignItems'];\n\n /* Number of columns in each row @default 12 /\n columns?: number;\n\n /* Sets `overflow` CSS property on the root element @default 'visible' /\n overflow?: React.CSSProperties['overflow'];\n\n /* Type of queries used for responsive styles @default 'media' /\n type?: 'media' \| 'container';\n\n /* Breakpoints values, only used with `type=\"container\"` */\n breakpoints?: GridBreakpoints;\n}\n\nexport type GridFactory = Factory<{\n props: GridProps;\n ref: HTMLDivElement;\n stylesNames: GridStylesNames;\n vars: GridCssVariables;\n staticComponents: {\n Col: typeof GridCol;\n };\n}>;\n\nconst defaultProps = {\n gap: 'md',\n columns: 12,\n} satisfies Partial<GridProps>;\n\nconst varsResolver = createVarsResolver<GridFactory>((_, { justify, align, overflow }) => ({\n root: {\n '--grid-justify': justify,\n '--grid-align': align,\n '--grid-overflow': overflow,\n },\n}));\n\nexport const Grid = factory<GridFactory>((_props) => {\n const props = useProps('Grid', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n grow,\n gap,\n rowGap,\n columnGap,\n columns,\n align,\n justify,\n children,\n breakpoints,\n type,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<GridFactory>({\n name: 'Grid',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const responsiveClassName = useRandomClassName();\n\n if (type === 'container' && breakpoints) {\n return (\n <GridProvider value={{ getStyles, grow, columns, breakpoints, type }}>\n <GridVariables selector={`.${responsiveClassName}`} {...props} />\n <div {...getStyles('container')}>\n <Box {...getStyles('root', { className: responsiveClassName })} {...others}>\n <div {...getStyles('inner')}>{children}</div>\n </Box>\n </div>\n </GridProvider>\n );\n }\n\n return (\n <GridProvider value={{ getStyles, grow, columns, breakpoints, type }}>\n <GridVariables selector={`.${responsiveClassName}`} {...props} />\n <Box {...getStyles('root', { className: responsiveClassName })} {...others}>\n <div {...getStyles('inner')}>{children}</div>\n </Box>\n </GridProvider>\n );\n});\n\nGrid.classes = classes;\nGrid.varsResolver = varsResolver;\nGrid.displayName = '@mantine/core/Grid';\nGrid.Col = GridCol;\n"],"mappings":";;;;;;;;;;;;;~~AAkEA~~,MAAM,eAAe;CACnB,KAAK;CACL,SAAS;CACV;AAED,MAAM,eAAe,oBAAiC,GAAG,EAAE,SAAS,OAAO,gBAAgB,EACzF,MAAM;CACJ,kBAAkB;CAClB,gBAAgB;CAChB,mBAAmB;CACpB,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,KACA,QACA,WACA,SACA,OACA,SACA,UACA,aACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,oBAAoB;AAEhD,KAAI,SAAS,eAAe,YAC1B,QACE,qBAAC,cAAD;EAAc,OAAO;GAAE;GAAW;GAAM;GAAS;GAAa;GAAM;YAApE,CACE,oBAAC,eAAD;GAAe,UAAU,IAAI;GAAuB,GAAI;GAAS,CAAA,EACjE,oBAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAC7B,oBAAC,KAAD;IAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;IAAE,GAAI;cAClE,oBAAC,OAAD;KAAK,GAAI,UAAU,QAAQ;KAAG;KAAe,CAAA;IACzC,CAAA;GACF,CAAA,CACO;;AAInB,QACE,qBAAC,cAAD;EAAc,OAAO;GAAE;GAAW;GAAM;GAAS;GAAa;GAAM;YAApE,CACE,oBAAC,eAAD;GAAe,UAAU,IAAI;GAAuB,GAAI;GAAS,CAAA,EACjE,oBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;GAAE,GAAI;aAClE,oBAAC,OAAD;IAAK,GAAI,UAAU,QAAQ;IAAG;IAAe,CAAA;GACzC,CAAA,CACO;;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM"}
1	+ {"version":3,"file":"Grid.mjs","names":["classes"],"sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n MantineSpacing,\n StyleProp,\n StylesApiProps,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { GridBreakpoints, GridProvider, type GridContextValue } from './Grid.context';\nimport { GridCol, type GridColProps } from './GridCol/GridCol';\nimport { GridVariables } from './GridVariables';\nimport classes from './Grid.module.css';\nexport type GridStylesNames = 'root' \| 'col' \| 'inner' \| 'container';\nexport type GridCssVariables = {\n root: '--grid-justify' \| '--grid-align' \| '--grid-overflow';\n};\n\nexport interface GridProps extends BoxProps, StylesApiProps<GridFactory>, ElementProps<'div'> {\n /** Gap between columns and rows, key of `theme.spacing` or any valid CSS value @default 'md' /\n gap?: StyleProp<MantineSpacing>;\n\n /* Row gap, overrides `gap` for vertical spacing /\n rowGap?: StyleProp<MantineSpacing>;\n\n /* Column gap, overrides `gap` for horizontal spacing /\n columnGap?: StyleProp<MantineSpacing>;\n\n /* If set, columns in the last row expand to fill all available space @default false /\n grow?: boolean;\n\n /* Sets `justify-content` @default flex-start /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Sets `align-items` @default stretch /\n align?: React.CSSProperties['alignItems'];\n\n /* Number of columns in each row @default 12 /\n columns?: number;\n\n /* Sets `overflow` CSS property on the root element @default 'visible' /\n overflow?: React.CSSProperties['overflow'];\n\n /* Type of queries used for responsive styles @default 'media' /\n type?: 'media' \| 'container';\n\n /* Breakpoints values, only used with `type=\"container\"` */\n breakpoints?: GridBreakpoints;\n}\n\nexport type GridFactory = Factory<{\n props: GridProps;\n ref: HTMLDivElement;\n stylesNames: GridStylesNames;\n vars: GridCssVariables;\n staticComponents: {\n Col: typeof GridCol;\n };\n}>;\n\nconst defaultProps = {\n gap: 'md',\n columns: 12,\n} satisfies Partial<GridProps>;\n\nconst varsResolver = createVarsResolver<GridFactory>((_, { justify, align, overflow }) => ({\n root: {\n '--grid-justify': justify,\n '--grid-align': align,\n '--grid-overflow': overflow,\n },\n}));\n\nexport const Grid = factory<GridFactory>((_props) => {\n const props = useProps('Grid', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n grow,\n gap,\n rowGap,\n columnGap,\n columns,\n align,\n justify,\n children,\n breakpoints,\n type,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<GridFactory>({\n name: 'Grid',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const responsiveClassName = useRandomClassName();\n\n if (type === 'container' && breakpoints) {\n return (\n <GridProvider value={{ getStyles, grow, columns, breakpoints, type }}>\n <GridVariables selector={`.${responsiveClassName}`} {...props} />\n <div {...getStyles('container')}>\n <Box {...getStyles('root', { className: responsiveClassName })} {...others}>\n <div {...getStyles('inner')}>{children}</div>\n </Box>\n </div>\n </GridProvider>\n );\n }\n\n return (\n <GridProvider value={{ getStyles, grow, columns, breakpoints, type }}>\n <GridVariables selector={`.${responsiveClassName}`} {...props} />\n <Box {...getStyles('root', { className: responsiveClassName })} {...others}>\n <div {...getStyles('inner')}>{children}</div>\n </Box>\n </GridProvider>\n );\n});\n\nGrid.classes = classes;\nGrid.varsResolver = varsResolver;\nGrid.displayName = '@mantine/core/Grid';\nGrid.Col = GridCol;\n\nexport namespace Grid {\n export type Props = GridProps;\n export type Factory = GridFactory;\n export type StylesNames = GridStylesNames;\n export type CssVariables = GridCssVariables;\n export type ColProps = GridColProps;\n export type ContextValue = GridContextValue;\n\n export namespace Col {\n export type Props = GridColProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;AAiEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS;CACV;AAED,MAAM,eAAe,oBAAiC,GAAG,EAAE,SAAS,OAAO,gBAAgB,EACzF,MAAM;CACJ,kBAAkB;CAClB,gBAAgB;CAChB,mBAAmB;CACpB,EACF,EAAE;AAEH,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,KACA,QACA,WACA,SACA,OACA,SACA,UACA,aACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,sBAAsB,oBAAoB;AAEhD,KAAI,SAAS,eAAe,YAC1B,QACE,qBAAC,cAAD;EAAc,OAAO;GAAE;GAAW;GAAM;GAAS;GAAa;GAAM;YAApE,CACE,oBAAC,eAAD;GAAe,UAAU,IAAI;GAAuB,GAAI;GAAS,CAAA,EACjE,oBAAC,OAAD;GAAK,GAAI,UAAU,YAAY;aAC7B,oBAAC,KAAD;IAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;IAAE,GAAI;cAClE,oBAAC,OAAD;KAAK,GAAI,UAAU,QAAQ;KAAG;KAAe,CAAA;IACzC,CAAA;GACF,CAAA,CACO;;AAInB,QACE,qBAAC,cAAD;EAAc,OAAO;GAAE;GAAW;GAAM;GAAS;GAAa;GAAM;YAApE,CACE,oBAAC,eAAD;GAAe,UAAU,IAAI;GAAuB,GAAI;GAAS,CAAA,EACjE,oBAAC,KAAD;GAAK,GAAI,UAAU,QAAQ,EAAE,WAAW,qBAAqB,CAAC;GAAE,GAAI;aAClE,oBAAC,OAAD;IAAK,GAAI,UAAU,QAAQ;IAAG;IAAe,CAAA;GACzC,CAAA,CACO;;EAEjB;AAEF,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Group.mjs","names":["classes"],"sources":["../../../src/components/Group/Group.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 { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children';\nimport classes from './Group.module.css';\n\nexport type GroupStylesNames = 'root';\nexport type GroupCssVariables = {\n root:\n \| '--group-gap'\n \| '--group-align'\n \| '--group-justify'\n \| '--group-wrap'\n \| '--group-child-width';\n};\n\nexport interface GroupStylesCtx {\n childWidth: string;\n}\n\nexport interface GroupProps extends BoxProps, StylesApiProps<GroupFactory>, ElementProps<'div'> {\n __size?: any;\n\n /** Controls `justify-content` CSS property @default 'flex-start' /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Controls `align-items` CSS property @default 'center' /\n align?: React.CSSProperties['alignItems'];\n\n /* Controls `flex-wrap` CSS property @default 'wrap' /\n wrap?: React.CSSProperties['flexWrap'];\n\n /* Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Determines whether each child element should have `flex-grow: 1` style @default false /\n grow?: boolean;\n\n /* Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children) @default true */\n preventGrowOverflow?: boolean;\n}\n\nexport type GroupFactory = Factory<{\n props: GroupProps;\n ref: HTMLDivElement;\n stylesNames: GroupStylesNames;\n vars: GroupCssVariables;\n ctx: GroupStylesCtx;\n}>;\n\nconst defaultProps = {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n} satisfies Partial<GroupProps>;\n\nconst varsResolver = createVarsResolver<GroupFactory>(\n (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n root: {\n '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n '--group-gap': getSpacing(gap),\n '--group-align': align,\n '--group-justify': justify,\n '--group-wrap': wrap,\n },\n })\n);\n\nexport const Group = factory<GroupFactory>((_props) => {\n const props = useProps('Group', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n children,\n gap,\n align,\n justify,\n wrap,\n grow,\n preventGrowOverflow,\n vars,\n variant,\n __size,\n mod,\n attributes,\n ...others\n } = props;\n\n const filteredChildren = filterFalsyChildren(children);\n const childrenCount = filteredChildren.length;\n const resolvedGap = getSpacing(gap ?? 'md');\n const childWidth = `calc(${\n 100 / childrenCount\n }% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;\n\n const stylesCtx: GroupStylesCtx = { childWidth };\n\n const getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props,\n stylesCtx,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box {...getStyles('root')} variant={variant} mod={[{ grow }, mod]} size={__size} {...others}>\n {filteredChildren}\n </Box>\n );\n});\n\nGroup.classes = classes;\nGroup.varsResolver = varsResolver;\nGroup.displayName = '@mantine/core/Group';\n"],"mappings":";;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,KAAK;CACL,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAED,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;CACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;CAClE,eAAe,WAAW,IAAI;CAC9B,iBAAiB;CACjB,mBAAmB;CACnB,gBAAgB;CACjB,EACF,EACF;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,KACA,OACA,SACA,MACA,MACA,qBACA,MACA,SACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,mBAAmB,oBAAoB,SAAS;CACtD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,cAAc,WAAW,OAAO,KAAK;AAsB3C,QACE,oBAAC,KAAD;EAAK,GAhBW,UAAwB;GACxC,MAAM;GACN;GACA,WALgC,EAAE,YAJjB,QACjB,MAAM,cACP,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc,KAER;GAM9C;GACA;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAGmB,OAAO;EAAW;EAAS,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI;EAAE,MAAM;EAAQ,GAAI;YACnF;EACG,CAAA;EAER;AAEF,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
1	+ {"version":3,"file":"Group.mjs","names":["classes"],"sources":["../../../src/components/Group/Group.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 { filterFalsyChildren } from './filter-falsy-children/filter-falsy-children';\nimport classes from './Group.module.css';\n\nexport type GroupStylesNames = 'root';\nexport type GroupCssVariables = {\n root:\n \| '--group-gap'\n \| '--group-align'\n \| '--group-justify'\n \| '--group-wrap'\n \| '--group-child-width';\n};\n\nexport interface GroupStylesCtx {\n childWidth: string;\n}\n\nexport interface GroupProps extends BoxProps, StylesApiProps<GroupFactory>, ElementProps<'div'> {\n __size?: any;\n\n /** Controls `justify-content` CSS property @default 'flex-start' /\n justify?: React.CSSProperties['justifyContent'];\n\n /* Controls `align-items` CSS property @default 'center' /\n align?: React.CSSProperties['alignItems'];\n\n /* Controls `flex-wrap` CSS property @default 'wrap' /\n wrap?: React.CSSProperties['flexWrap'];\n\n /* Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'md' /\n gap?: MantineSpacing;\n\n /* Determines whether each child element should have `flex-grow: 1` style @default false /\n grow?: boolean;\n\n /* Determines whether children should take only dedicated amount of space (`max-width` style is set based on the number of children) @default true */\n preventGrowOverflow?: boolean;\n}\n\nexport type GroupFactory = Factory<{\n props: GroupProps;\n ref: HTMLDivElement;\n stylesNames: GroupStylesNames;\n vars: GroupCssVariables;\n ctx: GroupStylesCtx;\n}>;\n\nconst defaultProps = {\n preventGrowOverflow: true,\n gap: 'md',\n align: 'center',\n justify: 'flex-start',\n wrap: 'wrap',\n} satisfies Partial<GroupProps>;\n\nconst varsResolver = createVarsResolver<GroupFactory>(\n (_, { grow, preventGrowOverflow, gap, align, justify, wrap }, { childWidth }) => ({\n root: {\n '--group-child-width': grow && preventGrowOverflow ? childWidth : undefined,\n '--group-gap': getSpacing(gap),\n '--group-align': align,\n '--group-justify': justify,\n '--group-wrap': wrap,\n },\n })\n);\n\nexport const Group = factory<GroupFactory>((_props) => {\n const props = useProps('Group', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n children,\n gap,\n align,\n justify,\n wrap,\n grow,\n preventGrowOverflow,\n vars,\n variant,\n __size,\n mod,\n attributes,\n ...others\n } = props;\n\n const filteredChildren = filterFalsyChildren(children);\n const childrenCount = filteredChildren.length;\n const resolvedGap = getSpacing(gap ?? 'md');\n const childWidth = `calc(${\n 100 / childrenCount\n }% - (${resolvedGap} - ${resolvedGap} / ${childrenCount}))`;\n\n const stylesCtx: GroupStylesCtx = { childWidth };\n\n const getStyles = useStyles<GroupFactory>({\n name: 'Group',\n props,\n stylesCtx,\n className,\n style,\n classes,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box {...getStyles('root')} variant={variant} mod={[{ grow }, mod]} size={__size} {...others}>\n {filteredChildren}\n </Box>\n );\n});\n\nGroup.classes = classes;\nGroup.varsResolver = varsResolver;\nGroup.displayName = '@mantine/core/Group';\n\nexport namespace Group {\n export type Props = GroupProps;\n export type StylesNames = GroupStylesNames;\n export type CssVariables = GroupCssVariables;\n export type StylesCtx = GroupStylesCtx;\n export type Factory = GroupFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4DA,MAAM,eAAe;CACnB,qBAAqB;CACrB,KAAK;CACL,OAAO;CACP,SAAS;CACT,MAAM;CACP;AAED,MAAM,eAAe,oBAClB,GAAG,EAAE,MAAM,qBAAqB,KAAK,OAAO,SAAS,QAAQ,EAAE,kBAAkB,EAChF,MAAM;CACJ,uBAAuB,QAAQ,sBAAsB,aAAa,KAAA;CAClE,eAAe,WAAW,IAAI;CAC9B,iBAAiB;CACjB,mBAAmB;CACnB,gBAAgB;CACjB,EACF,EACF;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,KACA,OACA,SACA,MACA,MACA,qBACA,MACA,SACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,mBAAmB,oBAAoB,SAAS;CACtD,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,cAAc,WAAW,OAAO,KAAK;AAsB3C,QACE,oBAAC,KAAD;EAAK,GAhBW,UAAwB;GACxC,MAAM;GACN;GACA,WALgC,EAAE,YAJjB,QACjB,MAAM,cACP,OAAO,YAAY,KAAK,YAAY,KAAK,cAAc,KAER;GAM9C;GACA;GACA,SAAA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CAGmB,OAAO;EAAW;EAAS,KAAK,CAAC,EAAE,MAAM,EAAE,IAAI;EAAE,MAAM;EAAQ,GAAI;YACnF;EACG,CAAA;EAER;AAEF,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}