Merge branch 'master' of github.1485827954.workers.dev-rtivital:mantinedev/mantine into 7.7

Author: rtivital

docs/src/components/CssVariablesList/CssVariableColorSwatch/CssVariableColorSwatch.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ColorSwatch } from '@mantine/core';
+
+const colorVariableRegex = /^(var\(--mantine-color[\w-]+\)|#\w+|rgba?\(\w+\))$/gm;
+
+export interface CssVariableColorSwatchProps {
+  variable: string;
+}
+
+export function CssVariableColorSwatch({ variable }: CssVariableColorSwatchProps) {
+  if (!variable || !variable.match(colorVariableRegex)) {
+    return null;
+  }
+
+  return <ColorSwatch size={20} color={variable} />;
+}

docs/src/components/CssVariablesList/CssVariablesList.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import { Code, DEFAULT_THEME, defaultCssVariablesResolver, keys } from '@mantine/core';
 import { MdxDataTable, MdxTitle } from '../MdxProvider';
+import { CssVariableColorSwatch } from './CssVariableColorSwatch/CssVariableColorSwatch';
 
 export function CssVariablesList() {
   const resolvedVariables = defaultCssVariablesResolver(DEFAULT_THEME);
   const variables = keys(resolvedVariables.variables).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.variables[key],
+    <CssVariableColorSwatch variable={resolvedVariables.variables[key]} />,
   ]);
 
   const lightVariables = keys(resolvedVariables.light).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.light[key],
+    <CssVariableColorSwatch variable={resolvedVariables.light[key]} />,
   ]);
 
   const darkVariables = keys(resolvedVariables.dark).map((key) => [
     <Code style={{ whiteSpace: 'nowrap' }}>{key}</Code>,
     resolvedVariables.dark[key],
+    <CssVariableColorSwatch variable={resolvedVariables.dark[key]} />,
   ]);
 
   return (

docs/src/pages/hooks/use-resize-observer.mdx

@@ -31,7 +31,7 @@ See also [use-element-size](https://mantine.dev/hooks/use-element-size/) hook in
 function useResizeObserver<T extends HTMLElement = any>(
   options?: ResizeObserverOptions
 ): [
-  MutableRefObject<T>,
+  RefObject<T>,
   {
     x: number;
     y: number;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-a91763c0e2",
-  "version": "7.6.1",
+  "version": "7.6.2",
   "description": "Mantine Components Monorepo",
   "packageManager": "[email protected]",
   "license": "MIT",
@@ -100,7 +100,7 @@
     "react-transition-group": "4.4.5",
     "recharts": "^2.10.3",
     "shikiji": "^0.7.4",
-    "type-fest": "^3.13.1"
+    "type-fest": "^4.12.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",

packages/@docs/demos/src/demos/charts/RadarChart/RadarChart.demo.multiple.tsx

@@ -11,7 +11,7 @@ function Demo() {
   return (
     <RadarChart
       h={300}
-      data={multiData}
+      data={data}
       dataKey="product"
       withPolarRadiusAxis
       series={[

packages/@docs/demos/src/demos/charts/RadarChart/RadarChart.demo.parts.tsx

@@ -5,12 +5,14 @@ import { multiData, multiDataCode } from './_data';
 
 const code = `
 import { RadarChart } from '@mantine/charts';
+import { data } from './data';
 
-function Wrapper() {
+
+function Demo() {
   return (
     <RadarChart
       h={300}
-      data={multiData}
+      data={data}
       dataKey="product"
       withPolarRadiusAxis
       series={[
@@ -23,7 +25,7 @@ function Wrapper() {
 }
 `;
 
-function Wrapper(props: any) {
+function Demo(props: any) {
   return (
     <RadarChart
       h={300}
@@ -41,7 +43,7 @@ function Wrapper(props: any) {
 
 export const parts: MantineDemo = {
   type: 'configurator',
-  component: Wrapper,
+  component: Demo,
   code: [
     { code, language: 'tsx', fileName: 'Demo.tsx' },
     { code: multiDataCode, language: 'tsx', fileName: 'data.ts' },

packages/@docs/demos/src/demos/charts/RadarChart/RadarChart.demo.rechartsProps.tsx

@@ -11,7 +11,7 @@ function Demo() {
   return (
     <RadarChart
       h={300}
-      data={multiData}
+      data={data}
       dataKey="product"
       withPolarRadiusAxis
       polarRadiusAxisProps={{ angle: 30, tickFormatter: (value) => \`\${value}$\` }}

packages/@docs/demos/src/demos/charts/RadarChart/_data.ts

@@ -88,7 +88,7 @@ export const multiData = [
 ];
 
 export const multiDataCode = `
-export const multiData = [
+export const data = [
   {
     product: 'Apples',
     sales_january: 120,

packages/@mantine/carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/carousel",
-  "version": "7.6.1",
+  "version": "7.6.2",
   "description": "Embla based carousel",
   "homepage": "https://mantine.dev/x/carousel/",
   "license": "MIT",
@@ -44,8 +44,8 @@
     "directory": "packages/@mantine/carousel"
   },
   "peerDependencies": {
-    "@mantine/core": "7.6.1",
-    "@mantine/hooks": "7.6.1",
+    "@mantine/core": "7.6.2",
+    "@mantine/hooks": "7.6.2",
     "embla-carousel-react": ">=7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

packages/@mantine/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "7.6.1",
+  "version": "7.6.2",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "7.6.1",
-    "@mantine/hooks": "7.6.1",
+    "@mantine/core": "7.6.2",
+    "@mantine/hooks": "7.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "recharts": "^2.10.3"