@mantine/core 9.6.3 → 9.7.0

package/cjs/components/Radio/Radio.cjs

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

package/cjs/components/Radio/Radio.cjs.map

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

package/cjs/components/Radio/Radio.module.cjs

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

package/cjs/components/Radio/Radio.module.cjs.map

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

package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs

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

package/cjs/components/Radio/RadioIndicator/RadioIndicator.cjs.map

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

package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs

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

package/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs.map

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

package/cjs/components/Toggle/Toggle.cjs

@@ -0,0 +1,80 @@
+"use client";
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_polymorphic_factory = require("../../core/factory/polymorphic-factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_Toggle_module = require("./Toggle.module.cjs");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Toggle/Toggle.tsx
+const defaultProps = { variant: "filled" };
+const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { size, radius, color, variant, autoContrast }) => {
+	const activeColors = theme.variantColorResolver({
+		color: color || theme.primaryColor,
+		theme,
+		variant: variant || "filled",
+		autoContrast
+	});
+	return { root: {
+		"--toggle-size": size !== void 0 ? require_get_size.getSize(size, "toggle-size") : void 0,
+		"--toggle-radius": radius !== void 0 ? require_get_size.getRadius(radius) : void 0,
+		"--toggle-active-bg": color || variant ? activeColors.background : void 0,
+		"--toggle-active-hover": color || variant ? activeColors.hover : void 0,
+		"--toggle-active-color": color || variant ? activeColors.color : void 0
+	} };
+});
+const Toggle = require_polymorphic_factory.polymorphicFactory((_props) => {
+	const props = require_use_props.useProps("Toggle", defaultProps, _props);
+	const { className, style, classNames, styles, unstyled, vars, active, defaultActive, onActiveChange, disabled, size, radius, autoWidth, color, autoContrast, children, component, onClick, tabIndex, attributes, ...others } = props;
+	const [_active, handleActiveChange] = (0, _mantine_hooks.useUncontrolled)({
+		value: active,
+		defaultValue: defaultActive,
+		finalValue: false,
+		onChange: onActiveChange
+	});
+	const getStyles = require_use_styles.useStyles({
+		name: "Toggle",
+		classes: require_Toggle_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...getStyles("root", { focusable: true }),
+		"data-active": _active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": _active,
+		tabIndex: disabled ? -1 : tabIndex,
+		size,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			handleActiveChange(!_active);
+			onClick?.(event);
+		},
+		children
+	});
+});
+Toggle.classes = require_Toggle_module.default;
+Toggle.varsResolver = varsResolver;
+Toggle.displayName = "@mantine/core/Toggle";
+//#endregion
+exports.Toggle = Toggle;
+
+//# sourceMappingURL=Toggle.cjs.map

package/cjs/components/Toggle/Toggle.cjs.map

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

package/cjs/components/Toggle/Toggle.module.cjs

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

package/cjs/components/Toggle/Toggle.module.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.module.cjs","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".root {\n  --toggle-size-xs: 22px;\n  --toggle-size-sm: 26px;\n  --toggle-size-md: 30px;\n  --toggle-size-lg: 36px;\n  --toggle-size-xl: 42px;\n\n  --toggle-size: var(--toggle-size-md);\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid;\n  border-radius: var(--toggle-radius, var(--mantine-radius-default));\n  cursor: pointer;\n  appearance: none;\n  text-decoration: none;\n  line-height: 1;\n  user-select: none;\n  font-size: var(--mantine-font-size-xs);\n  width: var(--toggle-size);\n  min-width: var(--toggle-size);\n  height: var(--toggle-size);\n  padding: calc(var(--toggle-size) / 5);\n  font-weight: var(--mantine-font-weight-medium);\n\n  &:where([data-auto-width]) {\n    width: auto;\n    padding: 0 calc(var(--toggle-size) / 4);\n  }\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n    color: var(--mantine-color-gray-7);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-1);\n  }\n\n  @mixin hover {\n    &:where(:not([data-disabled], [data-active])) {\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-0);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--toggle-active-bg, var(--mantine-primary-color-light));\n    color: var(--toggle-active-color, var(--mantine-primary-color-light-color));\n    border-color: transparent;\n\n    @mixin hover {\n      &:where(:not([data-disabled])) {\n        background-color: var(--toggle-active-hover, var(--mantine-primary-color-light-hover));\n      }\n    }\n  }\n\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n    color: var(--mantine-color-disabled-color);\n    background-color: var(--mantine-color-disabled);\n    border-color: transparent;\n  }\n\n  &:where([data-disabled][data-active]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n      color: var(--mantine-color-gray-6);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-4);\n      color: var(--mantine-color-dark-2);\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/Toolbar/Toolbar.cjs

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

package/cjs/components/Toolbar/Toolbar.cjs.map

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

package/cjs/components/Toolbar/Toolbar.context.cjs

@@ -0,0 +1,8 @@
+"use client";
+//#region packages/@mantine/core/src/components/Toolbar/Toolbar.context.ts
+const [ToolbarProvider, useToolbarContext] = require("../../core/utils/create-safe-context/create-safe-context.cjs").createSafeContext("Toolbar component was not found in tree");
+//#endregion
+exports.ToolbarProvider = ToolbarProvider;
+exports.useToolbarContext = useToolbarContext;
+
+//# sourceMappingURL=Toolbar.context.cjs.map

package/cjs/components/Toolbar/Toolbar.context.cjs.map

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

package/cjs/components/Toolbar/Toolbar.module.cjs

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

package/cjs/components/Toolbar/Toolbar.module.cjs.map

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

package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs

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

package/cjs/components/Toolbar/ToolbarDivider/ToolbarDivider.cjs.map

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

package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs

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

package/cjs/components/Toolbar/ToolbarGroup/ToolbarGroup.cjs.map

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

package/cjs/components/Toolbar/ToolbarToggle/ToolbarToggle.cjs

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