@carto/meridian-ds 5.2.1-alpha.de0b18a.359 → 5.2.1

package/CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ## 5.0
 
+### 5.2.1
+
+- ci(release): automate releases, alphas and release notes [#569](https://github.com/CartoDB/meridian-ds/pull/569)
+
 ### 5.2.0
 
 - feat(dialog): export useScrollBorders hook for scroll-edge borders [sc-578988] [#564](https://github.com/CartoDB/meridian-ds/pull/564)

package/dist/eslint-rules/index.cjs

@@ -178,7 +178,12 @@ const NON_ZERO = "Literal[raw=/^[0-9.]+$/][raw!=/^0+(\\.0+)?$/]";
 const exactly = (...alternatives) => `/^(${alternatives.join("|")})$/`;
 const SPACING = "[mp][trblxy]?|(margin|padding)(Top|Right|Bottom|Left|X|Y|Inline|Block)?|gap|rowGap|columnGap";
 const SPACING_KEY = exactly(SPACING);
-const MERIDIAN_COMPONENT = exactly(...MERIDIAN_COMPONENTS);
+const MERIDIAN_IMPORT = /^@carto\/meridian-ds(\/|$)/;
+const CSS_WIDE = "inherit|initial|unset|revert|revert-layer";
+const PALETTE_VALUE = `/^(${CSS_WIDE}|currentColor|transparent|divider|[a-z]+\\.[A-Za-z0-9]+(\\.[A-Za-z0-9]+)?)$/`;
+const ICON = "/(Icon|Outlined|Rounded|Sharp|TwoTone)$/";
+const VISUAL_KEY = "/^(background|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/";
+const COLOR_KEY = "/^(color|bgcolor|backgroundColor)$/";
 const SX = ":matches(JSXAttribute[name.name='sx'], Property[key.name='sx'])";
 const STYLED_OR_STYLE = ":matches(CallExpression[callee.callee.name='styled'], CallExpression[callee.object.name='styled'], CallExpression[callee.callee.object.name='styled'], JSXAttribute[name.name='style'])";
 const SPACING_CALL = "CallExpression[callee.property.name='spacing']";
@@ -193,109 +198,138 @@ const WRAPPERS = [
   "TemplateLiteral > ConditionalExpression > "
 ];
 const under = (parent, nodes) => nodes.flatMap((node) => WRAPPERS.map((w) => `${parent} > ${w}${node}`));
-const meridianDesignRules = {
-  "spacing-step": {
-    selector: anyOf(
-      ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
-        ...signed(OFF_SCALE),
-        `ArrayExpression > ${OFF_SCALE}`,
-        `ObjectExpression > Property > ${OFF_SCALE}`
-      ]),
-      ...under(
-        `Property[key.name=${SPACING_KEY}]`,
-        signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
-      )
-    ),
-    message: `Spacing off the Meridian scale: margin, padding and gap use ${spacingSteps.SPACING_STEPS.join(", ")}.`
-  },
-  "px-spacing": {
-    selector: anyOf(
-      ...under(`Property[key.name=${SPACING_KEY}]`, [
-        PX_STRING,
-        `ArrayExpression > ${PX_STRING}`,
-        `ObjectExpression > Property > ${PX_STRING}`
-      ]),
-      ...under(
-        `${STYLED_OR_STYLE} Property[key.name=${SPACING_KEY}]`,
-        signed(NON_ZERO)
-      )
-    ),
-    message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` are px."
-  },
-  "filled-icon": {
-    selector: anyOf(
-      "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
-      "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
-    ),
-    message: "Filled MUI icon: import the Outlined variant."
-  },
-  "alpha-white-black": {
-    selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
-    message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
-  },
-  "hex-color": {
-    selector: STYLE_STRING(
-      "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
-    ),
-    message: "Hardcoded hex color: use a palette token."
-  },
-  "rgb-color": {
-    selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
-    message: "Hardcoded rgb()/rgba() color: use a palette token."
-  },
-  "typography-style": {
-    selector: anyOf(
-      ...under(
-        `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontSize|fontWeight|lineHeight|fontFamily)$/]`,
-        ["Literal[value!=/^(inherit|initial|unset|revert|revert-layer)$/]"]
-      )
-    ),
-    message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
-  },
-  "external-link": {
-    selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
-    message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
-  },
-  "system-props": {
-    selector: "JSXOpeningElement[name.name=/^(Box|Stack|Grid|Grid2|Container)$/] > JSXAttribute[name.name=/^(m|p)[trblxy]?$/]",
-    message: "MUI system props are deprecated: move spacing into `sx`, e.g. `<Box sx={{ px: 2 }}>`."
-  },
-  "data-name": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='data-name']`,
-    message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
-  },
-  "literal-a11y-text": {
-    selector: anyOf(
-      ...["", "JSXExpressionContainer > "].map(
-        (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
-      )
-    ),
-    message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
-  },
-  "raw-shadow-radius": {
-    selector: anyOf(
-      "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
-      "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
-    ),
-    message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
-  },
-  "styled-meridian": {
-    selector: `CallExpression[callee.name='styled'] > Identifier[name=${MERIDIAN_COMPONENT}]`,
-    message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
-  },
-  "visual-sx": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='sx'] Property[key.name=/^(color|bgcolor|background|backgroundColor|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/]`,
-    message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
-  },
-  "disabled-without-reason": {
-    selector: "JSXOpeningElement[name.name=/^(Button|IconButton|SplitButton)$/]:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))",
-    message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
-  },
-  "disabled-cursor": {
-    selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
-    message: "Don't tweak the cursor for disabled states: the component already styles them."
-  }
-};
+const esqueryRegex = (re) => `/${re.source.replace(/\\?\//g, "\\x2F")}/`;
+function createMeridianDesignRules({
+  importSource = MERIDIAN_IMPORT
+} = {}) {
+  const source = esqueryRegex(importSource);
+  const forImported = (names, selector) => anyOf(
+    ...names.map(
+      (name) => `Program:has(ImportDeclaration[source.value=${source}] > :matches(ImportSpecifier, ImportDefaultSpecifier)[local.name='${name}']) ${selector(name)}`
+    )
+  );
+  const sxOf = (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='sx']`;
+  return {
+    "spacing-step": {
+      selector: anyOf(
+        ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
+          ...signed(OFF_SCALE),
+          `ArrayExpression > ${OFF_SCALE}`,
+          `ObjectExpression > Property > ${OFF_SCALE}`
+        ]),
+        ...under(
+          `Property[key.name=${SPACING_KEY}]`,
+          signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
+        )
+      ),
+      message: `Spacing off the Meridian scale: margin, padding and gap use ${spacingSteps.SPACING_STEPS.join(", ")}.`
+    },
+    "px-spacing": {
+      selector: anyOf(
+        ...under(`Property[key.name=${SPACING_KEY}]`, [
+          PX_STRING,
+          `ArrayExpression > ${PX_STRING}`,
+          `ObjectExpression > Property > ${PX_STRING}`
+        ]),
+        ...under(
+          `${STYLED_OR_STYLE} Property[key.name=${SPACING_KEY}]`,
+          signed(NON_ZERO)
+        )
+      ),
+      message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` are px."
+    },
+    "filled-icon": {
+      selector: anyOf(
+        "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
+        "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
+      ),
+      message: "Filled MUI icon: import the Outlined variant."
+    },
+    "alpha-white-black": {
+      selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
+      message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
+    },
+    "hex-color": {
+      selector: STYLE_STRING(
+        "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
+      ),
+      message: "Hardcoded hex color: use a palette token."
+    },
+    "rgb-color": {
+      selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
+      message: "Hardcoded rgb()/rgba() color: use a palette token."
+    },
+    "typography-style": {
+      selector: anyOf(
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontWeight|fontFamily)$/]`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='lineHeight']`,
+          [`Literal[value!=/^(${CSS_WIDE}|0|1|normal)$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='fontSize']:not(JSXOpeningElement[name.name=${ICON}] > JSXAttribute[name.name='sx'] Property)`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        )
+      ),
+      message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
+    },
+    "external-link": {
+      selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
+      message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
+    },
+    "data-name": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='data-name']`
+      ),
+      message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
+    },
+    "literal-a11y-text": {
+      selector: anyOf(
+        ...["", "JSXExpressionContainer > "].map(
+          (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
+        )
+      ),
+      message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
+    },
+    "raw-shadow-radius": {
+      selector: anyOf(
+        "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
+        "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
+      ),
+      message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
+    },
+    "styled-meridian": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `CallExpression[callee.name='styled'] > Identifier[name='${name}']`
+      ),
+      message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
+    },
+    "visual-sx": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `${sxOf(name)} :matches(Property[key.name=${VISUAL_KEY}], Property[key.name=${COLOR_KEY}] Literal[value!=${PALETTE_VALUE}])`
+      ),
+      message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
+    },
+    "disabled-without-reason": {
+      selector: forImported(
+        ["Button", "IconButton", "SplitButton"],
+        (name) => `JSXOpeningElement[name.name='${name}']:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))`
+      ),
+      message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
+    },
+    "disabled-cursor": {
+      selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
+      message: "Don't tweak the cursor for disabled states: the component already styles them."
+    }
+  };
+}
+const meridianDesignRules = createMeridianDesignRules();
 const PROPS_TYPES = new Set(MERIDIAN_PROPS_TYPES);
 const replacedBy = (names) => names.flatMap((n) => PROPS_TYPES.has(n) ? [n, `${n}Props`] : [n]);
 const USE_MERIDIAN = "Import from @carto/meridian-ds/components instead.";
@@ -329,5 +363,6 @@ const meridianRestrictedImports = {
     message: USE_MERIDIAN
   }))
 };
+exports.createMeridianDesignRules = createMeridianDesignRules;
 exports.meridianDesignRules = meridianDesignRules;
 exports.meridianRestrictedImports = meridianRestrictedImports;

package/dist/eslint-rules/index.js

@@ -176,7 +176,12 @@ const NON_ZERO = "Literal[raw=/^[0-9.]+$/][raw!=/^0+(\\.0+)?$/]";
 const exactly = (...alternatives) => `/^(${alternatives.join("|")})$/`;
 const SPACING = "[mp][trblxy]?|(margin|padding)(Top|Right|Bottom|Left|X|Y|Inline|Block)?|gap|rowGap|columnGap";
 const SPACING_KEY = exactly(SPACING);
-const MERIDIAN_COMPONENT = exactly(...MERIDIAN_COMPONENTS);
+const MERIDIAN_IMPORT = /^@carto\/meridian-ds(\/|$)/;
+const CSS_WIDE = "inherit|initial|unset|revert|revert-layer";
+const PALETTE_VALUE = `/^(${CSS_WIDE}|currentColor|transparent|divider|[a-z]+\\.[A-Za-z0-9]+(\\.[A-Za-z0-9]+)?)$/`;
+const ICON = "/(Icon|Outlined|Rounded|Sharp|TwoTone)$/";
+const VISUAL_KEY = "/^(background|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/";
+const COLOR_KEY = "/^(color|bgcolor|backgroundColor)$/";
 const SX = ":matches(JSXAttribute[name.name='sx'], Property[key.name='sx'])";
 const STYLED_OR_STYLE = ":matches(CallExpression[callee.callee.name='styled'], CallExpression[callee.object.name='styled'], CallExpression[callee.callee.object.name='styled'], JSXAttribute[name.name='style'])";
 const SPACING_CALL = "CallExpression[callee.property.name='spacing']";
@@ -191,109 +196,138 @@ const WRAPPERS = [
   "TemplateLiteral > ConditionalExpression > "
 ];
 const under = (parent, nodes) => nodes.flatMap((node) => WRAPPERS.map((w) => `${parent} > ${w}${node}`));
-const meridianDesignRules = {
-  "spacing-step": {
-    selector: anyOf(
-      ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
-        ...signed(OFF_SCALE),
-        `ArrayExpression > ${OFF_SCALE}`,
-        `ObjectExpression > Property > ${OFF_SCALE}`
-      ]),
-      ...under(
-        `Property[key.name=${SPACING_KEY}]`,
-        signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
-      )
-    ),
-    message: `Spacing off the Meridian scale: margin, padding and gap use ${SPACING_STEPS.join(", ")}.`
-  },
-  "px-spacing": {
-    selector: anyOf(
-      ...under(`Property[key.name=${SPACING_KEY}]`, [
-        PX_STRING,
-        `ArrayExpression > ${PX_STRING}`,
-        `ObjectExpression > Property > ${PX_STRING}`
-      ]),
-      ...under(
-        `${STYLED_OR_STYLE} Property[key.name=${SPACING_KEY}]`,
-        signed(NON_ZERO)
-      )
-    ),
-    message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` are px."
-  },
-  "filled-icon": {
-    selector: anyOf(
-      "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
-      "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
-    ),
-    message: "Filled MUI icon: import the Outlined variant."
-  },
-  "alpha-white-black": {
-    selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
-    message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
-  },
-  "hex-color": {
-    selector: STYLE_STRING(
-      "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
-    ),
-    message: "Hardcoded hex color: use a palette token."
-  },
-  "rgb-color": {
-    selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
-    message: "Hardcoded rgb()/rgba() color: use a palette token."
-  },
-  "typography-style": {
-    selector: anyOf(
-      ...under(
-        `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontSize|fontWeight|lineHeight|fontFamily)$/]`,
-        ["Literal[value!=/^(inherit|initial|unset|revert|revert-layer)$/]"]
-      )
-    ),
-    message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
-  },
-  "external-link": {
-    selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
-    message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
-  },
-  "system-props": {
-    selector: "JSXOpeningElement[name.name=/^(Box|Stack|Grid|Grid2|Container)$/] > JSXAttribute[name.name=/^(m|p)[trblxy]?$/]",
-    message: "MUI system props are deprecated: move spacing into `sx`, e.g. `<Box sx={{ px: 2 }}>`."
-  },
-  "data-name": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='data-name']`,
-    message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
-  },
-  "literal-a11y-text": {
-    selector: anyOf(
-      ...["", "JSXExpressionContainer > "].map(
-        (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
-      )
-    ),
-    message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
-  },
-  "raw-shadow-radius": {
-    selector: anyOf(
-      "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
-      "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
-    ),
-    message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
-  },
-  "styled-meridian": {
-    selector: `CallExpression[callee.name='styled'] > Identifier[name=${MERIDIAN_COMPONENT}]`,
-    message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
-  },
-  "visual-sx": {
-    selector: `JSXOpeningElement[name.name=${MERIDIAN_COMPONENT}] > JSXAttribute[name.name='sx'] Property[key.name=/^(color|bgcolor|background|backgroundColor|border|border(Top|Right|Bottom|Left)?(Color|Width|Style)?|borderRadius|boxShadow|opacity|outline|textTransform|textDecoration|fill|stroke)$/]`,
-    message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
-  },
-  "disabled-without-reason": {
-    selector: "JSXOpeningElement[name.name=/^(Button|IconButton|SplitButton)$/]:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))",
-    message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
-  },
-  "disabled-cursor": {
-    selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
-    message: "Don't tweak the cursor for disabled states: the component already styles them."
-  }
-};
+const esqueryRegex = (re) => `/${re.source.replace(/\\?\//g, "\\x2F")}/`;
+function createMeridianDesignRules({
+  importSource = MERIDIAN_IMPORT
+} = {}) {
+  const source = esqueryRegex(importSource);
+  const forImported = (names, selector) => anyOf(
+    ...names.map(
+      (name) => `Program:has(ImportDeclaration[source.value=${source}] > :matches(ImportSpecifier, ImportDefaultSpecifier)[local.name='${name}']) ${selector(name)}`
+    )
+  );
+  const sxOf = (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='sx']`;
+  return {
+    "spacing-step": {
+      selector: anyOf(
+        ...under(`${SX} Property[key.name=${SPACING_KEY}]`, [
+          ...signed(OFF_SCALE),
+          `ArrayExpression > ${OFF_SCALE}`,
+          `ObjectExpression > Property > ${OFF_SCALE}`
+        ]),
+        ...under(
+          `Property[key.name=${SPACING_KEY}]`,
+          signed(OFF_SCALE).map((n) => `${SPACING_CALL} > ${n}`)
+        )
+      ),
+      message: `Spacing off the Meridian scale: margin, padding and gap use ${SPACING_STEPS.join(", ")}.`
+    },
+    "px-spacing": {
+      selector: anyOf(
+        ...under(`Property[key.name=${SPACING_KEY}]`, [
+          PX_STRING,
+          `ArrayExpression > ${PX_STRING}`,
+          `ObjectExpression > Property > ${PX_STRING}`
+        ]),
+        ...under(
+          `${STYLED_OR_STYLE} Property[key.name=${SPACING_KEY}]`,
+          signed(NON_ZERO)
+        )
+      ),
+      message: "Raw px spacing: use the theme scale — `sx` spacing numbers (`px: 2`) or `theme.spacing(n)`. Numbers in `styled()`/`style` are px."
+    },
+    "filled-icon": {
+      selector: anyOf(
+        "ImportDeclaration[source.value=/^@mui.icons-material.(?!.*(Outlined|Rounded|Sharp|TwoTone)$)/]",
+        "ImportDeclaration[source.value='@mui/icons-material'][importKind!='type'] > ImportSpecifier[importKind!='type'][imported.name!=/(Outlined|Rounded|Sharp|TwoTone)$/]"
+      ),
+      message: "Filled MUI icon: import the Outlined variant."
+    },
+    "alpha-white-black": {
+      selector: "CallExpression[callee.name='alpha'] > MemberExpression[property.name=/^(white|black)$/][object.property.name='common']",
+      message: "`alpha()` on white/black: use the palette opacity shades `white[N]` / `black[N]`."
+    },
+    "hex-color": {
+      selector: STYLE_STRING(
+        "/(^|[\\s(,])#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\\b/"
+      ),
+      message: "Hardcoded hex color: use a palette token."
+    },
+    "rgb-color": {
+      selector: STYLE_STRING("/(^|[^a-z])rgba?\\(/"),
+      message: "Hardcoded rgb()/rgba() color: use a palette token."
+    },
+    "typography-style": {
+      selector: anyOf(
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name=/^(fontWeight|fontFamily)$/]`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='lineHeight']`,
+          [`Literal[value!=/^(${CSS_WIDE}|0|1|normal)$/]`]
+        ),
+        ...under(
+          `:matches(${SX}, ${STYLED_OR_STYLE}) Property[key.name='fontSize']:not(JSXOpeningElement[name.name=${ICON}] > JSXAttribute[name.name='sx'] Property)`,
+          [`Literal[value!=/^(${CSS_WIDE})$/]`]
+        )
+      ),
+      message: "Hardcoded typography: use `<Typography variant>` (and `weight`), `sx={{ typography: 'body2' }}` or `...theme.typography.body2`."
+    },
+    "external-link": {
+      selector: "JSXOpeningElement[name.name='a'] > JSXAttribute[name.name='target'] > Literal[value='_blank']",
+      message: 'Raw `<a target="_blank">`: use Meridian `Link` with `external`.'
+    },
+    "data-name": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `JSXOpeningElement[name.name='${name}'] > JSXAttribute[name.name='data-name']`
+      ),
+      message: "`data-name` on a Meridian component overrides its own marker: set it on a wrapper, or drop it."
+    },
+    "literal-a11y-text": {
+      selector: anyOf(
+        ...["", "JSXExpressionContainer > "].map(
+          (wrapper) => `JSXAttribute[name.name=/^(aria-label|placeholder)$/] > ${wrapper}Literal[value=/[A-Za-z]/]`
+        )
+      ),
+      message: "Hardcoded `aria-label` / `placeholder`: translate it with the i18n layer, and keep test ids out of it."
+    },
+    "raw-shadow-radius": {
+      selector: anyOf(
+        "Property[key.name='boxShadow'] > Literal[value=/\\d/]",
+        "Property[key.name='borderRadius'] > Literal[value=/^\\d+(\\.\\d+)?px$/]"
+      ),
+      message: "Hardcoded shadow or radius: use `theme.shadows[n]` / `theme.shape.borderRadius`."
+    },
+    "styled-meridian": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `CallExpression[callee.name='styled'] > Identifier[name='${name}']`
+      ),
+      message: "`styled()` of a Meridian component restyles it locally: use its props/variants, or raise the gap upstream in Meridian."
+    },
+    "visual-sx": {
+      selector: forImported(
+        MERIDIAN_COMPONENTS,
+        (name) => `${sxOf(name)} :matches(Property[key.name=${VISUAL_KEY}], Property[key.name=${COLOR_KEY}] Literal[value!=${PALETTE_VALUE}])`
+      ),
+      message: "Visual `sx` on a Meridian component overrides its design: keep `sx` to layout (spacing, size, position) and use its props/variants for the look."
+    },
+    "disabled-without-reason": {
+      selector: forImported(
+        ["Button", "IconButton", "SplitButton"],
+        (name) => `JSXOpeningElement[name.name='${name}']:has(> JSXAttribute[name.name='disabled']:not([value.expression.value=false])):not(:has(> JSXAttribute[name.name=/^(tooltip|aria-describedby)$/]))`
+      ),
+      message: "Disabled without a reason: pass `tooltip` (or `aria-describedby`) saying why it can’t be used."
+    },
+    "disabled-cursor": {
+      selector: "Property[key.name='cursor'] > Literal[value='not-allowed']",
+      message: "Don't tweak the cursor for disabled states: the component already styles them."
+    }
+  };
+}
+const meridianDesignRules = createMeridianDesignRules();
 const PROPS_TYPES = new Set(MERIDIAN_PROPS_TYPES);
 const replacedBy = (names) => names.flatMap((n) => PROPS_TYPES.has(n) ? [n, `${n}Props`] : [n]);
 const USE_MERIDIAN = "Import from @carto/meridian-ds/components instead.";
@@ -328,6 +362,7 @@ const meridianRestrictedImports = {
   }))
 };
 export {
+  createMeridianDesignRules,
   meridianDesignRules,
   meridianRestrictedImports
 };

package/dist/metadata.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.2.1-alpha.de0b18a.359",
+  "version": "5.2.1",
   "conventions": "# Meridian usage conventions (for code-generating agents)\n\nSystem-level rules an agent should apply across all components.\n\nMeridian is the source of truth: when an existing codebase pattern contradicts Meridian, follow Meridian — don't replicate the contradicting local pattern.\n\n## Choosing a component\n\n- Don't hand-roll what the design system already provides. Before writing a\n  custom component, a styled wrapper, or a block of primitives (a modal,\n  chip/tag, card, empty state, dropdown, tooltip, copy-to-clipboard input,\n  etc.), confirm no Meridian component covers it — reuse or extend the existing one instead of rebuilding it.\n- Prefer a Meridian component over a bare MUI one whenever a Meridian wrapper\n  exists — the wrappers carry CARTO theming, a11y defaults, and narrowed APIs. MUI is correct for layout primitives (`Box`/`Grid`/`Stack`/`Container`) and for gaps Meridian doesn't fill (e.g. date pickers); \"prefer Meridian\" is not \"never MUI\".\n- Resolve \"which component\" by reading each one's `description` + `keywords`,\n  then confirm with its `decisionTree` (the conditions that point elsewhere) and `limitations` (what it lacks — check before you downgrade to it).\n  Don't infer selection from prop lists.\n- Common hand-rolled patterns and their Meridian replacement:\n  - `<a target=\"_blank\">` → `Link external`\n  - modal built from `Box` → `Dialog` + `DialogHeader`/`DialogContent`/`DialogFooter`\n  - pill/badge `Box` → `Tag`\n  - custom select/dropdown → `SelectField`, or `FilterDropdown` for filters\n  - label + required/optional mark → `LabelWithIndicator`\n  - read-only input with a copy button → `CopiableInputText`\n  - custom input → `TextField` (themed by Meridian; pick its `variant`) or `SearchField`\n  - manual ellipsis + tooltip → `EllipsisWithTooltip`\n  - status/feedback `Box` → `Alert`\n  - form label/help text → `InputLabel`/`FormHelperText` (themed by Meridian)\n- Compose before customizing: a cluster of `styled()` wrappers that mirrors a composite is a smell (e.g. a hand-built row instead of `ListItem` + `ListItemIcon iconProps` + `ListItemText` + `ListItemRightContent`). Don't trust a code comment claiming the design system can't do something — check the component's props first.\n\n## Icons\n\n- Source icons from Meridian's custom-icons first, then `@mui/icons-material`;\n  add a local SVG only when neither has an equivalent. Don't duplicate an icon\n  the design system already ships.\n- Find the right custom icon with `meridian_list_icons` — match by name or keyword (e.g. \"warehouse\" → `Bigquery`), import it from `@carto/meridian-ds/custom-icons`, and render `<Name />`. Every icon shares one prop type, `CustomIconProps` (MUI `SvgIconProps` — `color`/`fontSize`/`sx` — plus `width`/`height`).\n- To confirm a shortlisted icon by sight (or match an icon in a design you're implementing), call `meridian_get_screenshot` with `name: 'icons'` and Read the returned image path — a labeled grid of every icon.\n- Use the standard icon sizes — small 12px, medium (default) 18px, large 24px;\n  a value off this scale (e.g. 16, 20) needs design sign-off. Prefer the\n  outlined variants.\n- `IconWrapper`'s `size` is the outer footprint (steps 12/18/24/32/40/48), not the glyph size — the glyph inside is sized for you.\n- A new SVG must inherit, not bake in: set `fill='currentColor'` so it takes\n  the parent's color, and use the standard size — don't hardcode\n  color/opacity/dimensions.\n- For an icon color outside the palette `color` set, pass a theme token via\n  `htmlColor` (e.g. `htmlColor={theme.palette.text.secondary}`) — never a\n  hardcoded hex.\n\n## Accessibility\n\n- Any icon-only control needs an accessible name: `tooltip` or `aria-label`.\n- Don't disable a control without telling the user why — pass the reason as `tooltip` on `Button`/`IconButton`/`SplitButton` (it shows while disabled), or link it with `aria-describedby`.\n- An `aria-label` must be human-readable text describing the control, not a test id in disguise — use a separate test hook for that.\n- User-facing strings (labels, `aria-label`, placeholders, messages) go through the app's i18n layer, not hardcoded literals.\n- Interactive elements are real controls (`Button`, `IconButton`, `Link`, …) — never a `div`/`Box` with `onClick`.\n- Every input has a visible or accessible label, not just a placeholder; every image has `alt`.\n\n## Props\n\n- Two sources, both pinned to the installed `@carto/meridian-ds`: **exact props / types / JSDoc** come from the package's **type declarations** — read the `<Name>.d.ts` directly — while the **`meridian-design-system` MCP** (`meridian_*` tools) covers what types can't: which component, when, gotchas, and real examples.\n- A component's curation lists the high-value inherited MUI props worth knowing (`curation.mui`, e.g. `color`/`variant`/`size`); the rest of MUI's surface is available but rarely needed.\n- Don't use `sx`/inline styles to override a Meridian component's visual design (colors, typography, borders, sizing) — use its documented props and the theme tokens. (`sx` for layout/spacing on primitives is fine — see Styling.)\n- Prefer the prop over an override (`Typography noWrap`/`weight`, `fullWidth`, `Alert isSticky`, …). Don't restyle one component to imitate another or to fake a state — pick the component/variant that already looks that way (e.g. `TextField variant=\"standard\"`, or plain `Typography` for a read-only value). Avoid brittle descendant selectors into a component's internals.\n- Don't restate or cancel built-in styling: no wrapper re-applying a component's own border/radius/background, no `disablePadding` on a parent only to re-add padding on its children.\n- `!important` on a Meridian or themed component is an override smell — a design-system gap to raise upstream.\n- If no prop covers the visual change you need, treat it as a design-system gap: request the variant/behavior upstream in Meridian rather than permanently overriding the component locally — a local `styled()` of a Meridian component is a smell, not a fix.\n\n## Styling\n\n- Use theme tokens, never hardcoded values: colors from the palette (`text.*`, `background.*`, `divider`, semantic `*.main`) and spacing from the theme scale (`theme.spacing(n)`, or `sx` numeric spacing like `px: 2` / `mt: 1.5`) — no raw hex/rgb or px. Margin, padding and gap use steps `0.25, 0.5, 0.75, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15` (2–120px); `width`/`height` and positional offsets may use any step (`spacing-step` in `@carto/meridian-ds/eslint-rules` lints it). Get the exact values — palette keys, spacing base, type ramp, `shape.borderRadius`, breakpoints, shadows — from `meridian_get_tokens`.\n- Token details:\n  - `sx` spacing keys (`m*`/`p*`/`gap`) resolve to the scale, but `top`/`right`/`bottom`/`left` don't (`top: 2` is 2px) — use `theme.spacing()` there.\n  - In `styled()`, always use `theme.spacing()`. `style={}` isn't theme-aware — use `sx`.\n  - Borders use `divider`; radius comes from `shape.borderRadius`; elevation from `theme.shadows[n]`.\n  - Translucent black/white use `palette.black[N]`/`palette.white[N]` (N = 90, 60, 40, 25, 12, 8, 4), not `alpha()`.\n  - Motion uses `theme.transitions` and respects `prefers-reduced-motion`; responsive rules use `theme.breakpoints`.\n- Text uses `<Typography variant=…>` (with the `weight` prop for emphasis), never hardcoded `fontSize`/`fontWeight`/`lineHeight`/`fontFamily`. Text that can overflow gets `EllipsisWithTooltip` (or `noWrap` when the full text isn't needed).\n- Meridian's type scale is custom and does not match MUI defaults (e.g. `body2`/`caption` differ from MUI's sizes, and there are Meridian-only variants like `code1`/`code2`/`code3` and `overlineDelicate`). Pick the variant by role from Typography's variant list (`meridian_get_examples('Typography')`) — don't assume a px size or map px → variant yourself.\n- `sx` is the right tool for one-off layout/spacing on primitives (`Box`/`Grid`/`Stack`), not the deprecated MUI system props\n  (`<Box px={2}>` → `<Box sx={{ px: 2 }}>`). This is layout, distinct from restyling a Meridian component (see Props).\n\n- A reusable component doesn't bake in its placement: no absolute positioning, outer margin, or fixed outer size — accept `sx` and let the caller place it.\n\n## Examples\n\n- Never invent example code when a story exists — use the component's real story source (`meridian_get_examples`). The lead Usage story is the copy-paste starting point; the later stories are illustrative (variants, edge cases) and may carry story-arg shells, so don't copy one wholesale as your baseline.\n",
   "components": [
     {

package/dist/types/eslint-rules/index.d.ts

@@ -7,8 +7,12 @@ export interface RestrictedSyntaxEntry {
  * Meridian design rules as `no-restricted-syntax` entries, keyed by name — spread
  * them into the rule's options. Generated from the installed Meridian version
  * (e.g. the spacing scale), so they stay in sync with the pinned package.
+ * Component rules apply only where the component is imported from `importSource`,
+ * so a same-named one from elsewhere (`react-router-dom`'s `Link`) isn't flagged.
  */
-export declare const meridianDesignRules: {
+export declare function createMeridianDesignRules({ importSource, }?: {
+    importSource?: RegExp;
+}): {
     'spacing-step': {
         selector: string;
         message: string;
@@ -41,7 +45,66 @@ export declare const meridianDesignRules: {
         selector: string;
         message: string;
     };
-    'system-props': {
+    'data-name': {
+        selector: string;
+        message: string;
+    };
+    'literal-a11y-text': {
+        selector: string;
+        message: string;
+    };
+    'raw-shadow-radius': {
+        selector: string;
+        message: string;
+    };
+    'styled-meridian': {
+        selector: string;
+        message: string;
+    };
+    'visual-sx': {
+        selector: string;
+        message: string;
+    };
+    'disabled-without-reason': {
+        selector: string;
+        message: string;
+    };
+    'disabled-cursor': {
+        selector: string;
+        message: string;
+    };
+};
+/** `createMeridianDesignRules()` for code importing from `@carto/meridian-ds`. */
+export declare const meridianDesignRules: {
+    'spacing-step': {
+        selector: string;
+        message: string;
+    };
+    'px-spacing': {
+        selector: string;
+        message: string;
+    };
+    'filled-icon': {
+        selector: string;
+        message: string;
+    };
+    'alpha-white-black': {
+        selector: string;
+        message: string;
+    };
+    'hex-color': {
+        selector: string;
+        message: string;
+    };
+    'rgb-color': {
+        selector: string;
+        message: string;
+    };
+    'typography-style': {
+        selector: string;
+        message: string;
+    };
+    'external-link': {
         selector: string;
         message: string;
     };

package/dist/types/eslint-rules/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/eslint-rules/index.ts"],"names":[],"mappings":"AAQA,wCAAwC;AACxC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAmDD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHiB,CAAA;AAUjD;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;CA8BrC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/eslint-rules/index.ts"],"names":[],"mappings":"AAQA,wCAAwC;AACxC,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAgED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,YAA8B,GAC/B,GAAE;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2JhC;AAED,kFAAkF;AAClF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA8B,CAAA;AAU9D;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB;;;;;;;;;;;CA8BrC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "5.2.1-alpha.de0b18a.359",
+  "version": "5.2.1",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {
@@ -43,10 +43,6 @@
     "clean:all": "yarn run clean:node_modules && yarn run clean:build",
     "clean:node_modules": "rm -rf ./node_modules",
     "clean:build": "rm -rf ./coverage ./reports ./dist",
-    "postversion": "yarn postversion:check && yarn postversion:commit && yarn postversion:push",
-    "postversion:check": "yarn lint && yarn test",
-    "postversion:commit": "node scripts/postversion-commit.js",
-    "postversion:push": "git push && git push --tags",
     "prepare": "husky",
     "prepack": "yarn clean:build && yarn build && yarn metadata:build && yarn build:mcp",
     "figma:connect": "bash -c '[ -f .env ] && source .env; export FIGMA_ACCESS_TOKEN; figma connect --token=$FIGMA_ACCESS_TOKEN \"$@\"' --",